🐛 bug: style home categories

:%s

pages/index.tsx

@@ -1,13 +1,6 @@
 
-import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon ,Author,DateTime} from 'src/components/common'
+import { Layout } 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';
 
 
 
@@ -25,44 +18,14 @@ 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>
       <Author image={imgAuthor} name="Alessandro Del Piero"></Author>
       <DateTime date="april 30,2021"></DateTime>*/}
-      <HomeCategories categories={categories}></HomeCategories> 
+      <HomeCategories />
     </>
   )
 }

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

@@ -1,10 +1,6 @@
-@import '../../../../../styles/_utilities';
+@import "../../../../../styles/_utilities";
 
 .categoryItem {
-
-    @screen md{
-        font-size:1.6rem;
-    }
     .categoryItemImage {
         width: 10.6rem;
         margin: 0 auto;
@@ -20,61 +16,9 @@
         }
     }
     .categoryItemText {
-        
+        @apply sub-headline;
-        font-size: 1.6rem;
-        line-height: 2.4rem;
         text-align: center;
-        color: #000000;
+        font-feature-settings: "salt" on;
-        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

@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from 'next/link';
 
 interface CategoryItem {
-    image: string,
+    image: StaticImageData,
     name: string,
     link: string
 }
@@ -15,12 +15,16 @@ const CategoryItem = ({image,name,link}:CategoryItem) => {
     return (
         <div className={classNames(s.categoryItem)}>
             <div className={classNames(s.categoryItemImage)}>
-                <Link href="#">
+                <Link href={link}>
+                    <a>
                         <Image src={image} />
+                    </a>
                 </Link>
             </div>
-            <Link href="#">
+            <Link href={link}>
+                <a>
                     <div className={classNames(s.categoryItemText)}>{name}</div>
+                </a>
             </Link>
         </div >
     )

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

@@ -1,29 +1,11 @@
-@import '../../../../styles/_utilities';
+@import "../../../../styles/_utilities";
 .homeCategoriesWrapper {
-    @apply flex flex-col items-center justify-center ;
+    @apply flex flex-col items-center justify-center spacing-horizontal;
-    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 ;
+        @apply flex justify-start items-center flex-wrap;
         margin: 1rem 0;
         @screen md {
             @apply flex-nowrap;
@@ -36,6 +18,4 @@
             }
         }
     }
-   
-   
 }

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

@@ -1,31 +1,67 @@
-import React from 'react';
-
-import s from './HomeCategories.module.scss'
 import classNames from 'classnames';
-import CategoryItem from './CategoriesItem/CategoryItem';
+import React from 'react';
 import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
+import CategoryItem from './CategoriesItem/CategoryItem';
+import s from './HomeCategories.module.scss';
+import coffeebean from './img/coffeebean.png';
+import frozen from './img/frozen.png';
+import sauce from './img/sauce.png';
+import seafood from './img/seafood.png';
+import veggle from './img/veggle.png';
 
-interface HomeCategories {
+
-    categories: any[]
+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"
+    }
+]
 
-const HomeCategories = ({categories}:HomeCategories) => {
+const HomeCategories = () => {
     return (
-  
         <div className={classNames(s.homeCategoriesWrapper)}>
             <div className={classNames(s.homeCategoriesHeading)}>
-                    <HeadingCommon  children="CATEGORIES"></HeadingCommon>
+                <HeadingCommon align='center' children="CATEGORIES"></HeadingCommon>
             </div>
 
             <div className={classNames(s.homeCategoryList)}>
-                    {categories?.map((props,index)=>(
+                {categories?.map(item => (
-                        <div key={index} className={classNames(s.homeCategoriesItem)}>
+                    <div key={item.name} className={classNames(s.homeCategoriesItem)}>
-                            <CategoryItem {...props}></CategoryItem>
+                        <CategoryItem
+                            name={item.name}
+                            image={item.image}
+                            link={item.link}
+
+                        />
                     </div>
                 ))}
             </div>
         </div>
-       
     )
 }