feat: HomeCategories

grocery-vercel-commerce

@@ -0,0 +1 @@
+Subproject commit 3c7aa8e862bfd8d44719be44c6c0a31ab01524a3

pages/index.tsx

@@ -1,6 +1,16 @@
 
 import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon ,Author,DateTime} from 'src/components/common'
+import { HomeCategories } from 'src/components/modules/home';
 import imgAuthor from '../src/components/common/Author/img/author.png';
+
+import veggle from '../src/components/modules/home/homeCategories/img/veggle.png';
+import seafood from '../src/components/modules/home/homeCategories/img/seafood.png';
+import frozen from '../src/components/modules/home/homeCategories/img/frozen.png';
+import coffeebean from '../src/components/modules/home/homeCategories/img/coffeebean.png';
+import sauce from '../src/components/modules/home/homeCategories/img/sauce.png';
+
+
+
 const dataTest = [{
   text: 1
 }, {
@@ -15,12 +25,44 @@ const dataTest = [{
   text: 6
 }]
 const test = (props: { text: string }) => <div className="h-64 bg-yellow-300">{props.text}</div>
+const categories = [
+  {
+    id:1,
+    image:veggle,
+    name:"Veggie",
+    link:"veggie.html"
+  },  {
+    id:2,
+    image:seafood,
+    name:"Seafood",
+    link:"seafood.html"
+  }
+  , {
+    id:3,
+    image:frozen,
+    name:"Frozen",
+    link:"frozen.html"
+  }
+  , {
+    id:4,
+    image:coffeebean,
+    name:"Coffe Bean",
+    link:"frozen.html"
+  }
+  , {
+    id:5,
+    image:sauce,
+    name:"Sauce",
+    link:"frozen.html"
+  }
+]
 export default function Home() {
   return (
     <>
-      <CheckboxCommon defaultChecked={true}></CheckboxCommon>
+      {/* <CheckboxCommon defaultChecked={true}></CheckboxCommon>
       <Author image={imgAuthor} name="Alessandro Del Piero"></Author>
-      <DateTime date="april 30,2021"></DateTime>
+      <DateTime date="april 30,2021"></DateTime>*/}
+      <HomeCategories categories={categories}></HomeCategories> 
     </>
   )
 }

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -0,0 +1,23 @@
+@import '../../../styles/utilities';
+
+.headingCommon {
+  @apply font-heading uppercase text-left spacing-horizontal-left;
+  font-size: 3.2rem;
+  line-height: 4rem;
+
+  &.highlight {
+    color: var(--negative);
+  }
+  &.light {
+    color: var(--disabled);
+  }
+  &.center {
+    @apply text-center;
+  }
+
+  @screen md {
+    @apply spacing-horizontal;
+    font-size: 4.8rem;
+    line-height: 5.6rem;
+  } 
+}

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HeadingCommon.module.scss'
+
+interface HeadingCommonProps {
+    type?: 'highlight' | 'light' | 'default';
+    align?: 'center' | 'left';
+    children: string;
+}
+
+const HeadingCommon = ({ type='default', align='left', children }: HeadingCommonProps) => {
+
+    return (
+        <div className={classNames(s.headingCommon, {
+            [s[type]]: type,
+            [s[align]]: align
+          })}
+        >{children}</div>
+    )
+
+}
+
+export default HeadingCommon

src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss

@@ -0,0 +1,80 @@
+@import '../../../../../styles/_utilities';
+
+.categoryItem{
+
+    @screen md{
+        font-size:1.6rem;
+    }
+    .categoryItemImage{
+        width: 10.6rem;
+        margin: 0 auto;
+        max-height: 14rem;
+        object-fit: cover;
+        cursor: pointer;
+        @screen md{
+            width: 100%;
+        }
+        img{
+            width:100%;
+            height: 100%;
+        }
+    }
+    .categoryItemText{
+        
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        text-align: center;
+        color: #000000;
+        font-feature-settings: 'salt' on;
+        cursor: pointer;
+        @screen md{
+            font-family: var(--font-sans);
+            font-size:2.4rem;
+            line-height: 3.2rem;
+        }
+    }
+    // @screen md {
+    //     width:33%;
+        
+    // }
+}
+
+
+
+// @import '../../../../styles/utilities';
+// .homeFeature {
+//     @apply spacing-horizontal-left;
+//     vertical-align: middle;
+//     @screen md {
+//         @apply spacing-horizontal grid grid-cols-3;
+   
+//     }
+// }
+// .homeFeatureItem {
+//     @apply inline-block;
+   
+//     .itemImg {
+//         @apply float-left clear-both;
+//         width: 5.6rem;
+//         height: 5.6rem;
+//         @screen md {
+//             @apply float-left clear-both;
+//             width: 11.2rem;
+//             height: 11.2rem;
+//             vertical-align: middle;
+//         }
+//     }
+//     .itemText {
+//         @apply collection-subtitle;
+//         width: 28rem;
+//         height: 9.6rem;
+//         margin-left: 2.4rem;
+//         @screen md {
+//             @apply collection-subtitle text-justify;
+//             width: 28rem;
+//             height: 9.6rem;
+//             margin-left: 2.4rem;
+//             color: red;
+//         }
+//     }
+// }

src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import s from './CategoryItem.module.scss'
+import classNames from 'classnames';
+import Image from "next/image";
+import Link from 'next/link';
+
+interface CategoryItem {
+    image: string,
+    name: string,
+    link: string
+}
+
+const CategoryItem = ({image,name,link}:CategoryItem) => {
+    return (
+        <div className={classNames(s.categoryItem)}>
+            <div className={classNames(s.categoryItemImage)}> 
+                <Link href="#">
+                    <Image src={image}  />
+                </Link>
+            </div>
+            <Link href="#">
+                <div className={classNames(s.categoryItemText)}>{name}</div>
+            </Link>
+        </div>
+    )
+}
+
+export default CategoryItem

src/components/modules/home/HomeCategories/HomeCategories.module.scss

@@ -0,0 +1,41 @@
+@import '../../../../styles/_utilities';
+.homeCategoriesWrapper{
+    @apply flex flex-col items-center justify-center ;
+    width: 100%;
+    background-color:white;
+
+    @screen md{
+        background-color:var(--background);
+        height: 36.531rem;
+    }
+
+    .homeCategoriesHeading{
+        width: 100%;
+        font-weight: bold;
+        line-height: 0.64rem;
+        @screen md{
+            width:auto;
+        }
+        .headingCommon{
+            font-size: 3.2rem;
+        }
+    }
+
+ 
+    .homeCategoryList {
+        @apply spacing-horizontal flex justify-start items-center flex-wrap ;
+        margin: 1rem 0;
+        @screen md{
+            @apply flex-nowrap ;
+        }
+        .homeCategoriesItem{
+                width: calc(100% / 3);
+            @screen md{
+                margin-top:2rem;
+                width:100%;
+            }
+        }
+    }
+   
+   
+}

src/components/modules/home/HomeCategories/HomeCategories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import s from './HomeCategories.module.scss'
+import classNames from 'classnames';
+import CategoryItem from './CategoriesItem/CategoryItem';
+import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
+
+interface HomeCategories {
+    categories: any[]
+}
+
+const HomeCategories = ({categories}:HomeCategories) => {
+    return (
+  
+            <div className={classNames(s.homeCategoriesWrapper)}>
+                <div className={classNames(s.homeCategoriesHeading)}>
+                    <HeadingCommon  children="CATEGORIES"></HeadingCommon>
+                </div>
+
+                <div className={classNames(s.homeCategoryList)}>
+                    {categories?.map((props,index)=>(
+                        <div key={index} className={classNames(s.homeCategoriesItem)}>
+                            <CategoryItem {...props}></CategoryItem>
+                        </div>
+                    ))}
+                 </div>
+            </div>
+       
+    )
+}
+
+export default HomeCategories

src/components/modules/home/index.ts

@@ -1 +1,2 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as HomeCategories } from './HomeCategories/HomeCategories'