🐛 bug: style home categories

:%s

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

@@ -1,80 +1,24 @@
-@import '../../../../../styles/_utilities';
+@import "../../../../../styles/_utilities";
 
-.categoryItem{
-
-    @screen md{
-        font-size:1.6rem;
-    }
-    .categoryItemImage{
+.categoryItem {
+    .categoryItemImage {
         width: 10.6rem;
         margin: 0 auto;
         max-height: 14rem;
         object-fit: cover;
         cursor: pointer;
-        @screen md{
+        @screen md {
             width: 100%;
         }
-        img{
-            width:100%;
+        img {
+            width: 100%;
             height: 100%;
         }
     }
-    .categoryItemText{
-        
-        font-size: 1.6rem;
-        line-height: 2.4rem;
+    .categoryItemText {
+        @apply sub-headline;
         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,23 +6,27 @@ import Image from "next/image";
 import Link from 'next/link';
 
 interface CategoryItem {
-    image: string,
+    image: StaticImageData,
     name: string,
     link: string
 }
 
-const CategoryItem = ({image,name,link}:CategoryItem) => {
+const CategoryItem = ({ image, name, link }: CategoryItem) => {
     return (
         <div className={classNames(s.categoryItem)}>
-            <div className={classNames(s.categoryItemImage)}> 
-                <Link href="#">
-                    <Image src={image}  />
+            <div className={classNames(s.categoryItemImage)}>
+                <Link href={link}>
+                    <a>
+                        <Image src={image} />
+                    </a>
                 </Link>
             </div>
-            <Link href="#">
-                <div className={classNames(s.categoryItemText)}>{name}</div>
+            <Link href={link}>
+                <a>
+                    <div className={classNames(s.categoryItemText)}>{name}</div>
+                </a>
             </Link>
-        </div>
+        </div >
     )
 }
 

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

@@ -1,41 +1,21 @@
-@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;
+@import "../../../../styles/_utilities";
+.homeCategoriesWrapper {
+    @apply flex flex-col items-center justify-center spacing-horizontal;
+    @screen md {
+        background-color: var(--background);
     }
-
-    .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 ;
+        @screen md {
+            @apply flex-nowrap;
         }
-        .homeCategoriesItem{
-                width: calc(100% / 3);
-            @screen md{
-                margin-top:2rem;
-                width:100%;
+        .homeCategoriesItem {
+            width: calc(100% / 3);
+            @screen md {
+                margin-top: 2rem;
+                width: 100%;
             }
         }
     }
-   
-   
 }

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 HomeCategories = ({categories}:HomeCategories) => {
+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 = () => {
     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 className={classNames(s.homeCategoriesWrapper)}>
+            <div className={classNames(s.homeCategoriesHeading)}>
+                <HeadingCommon align='center' children="CATEGORIES"></HeadingCommon>
             </div>
-       
+
+            <div className={classNames(s.homeCategoryList)}>
+                {categories?.map(item => (
+                    <div key={item.name} className={classNames(s.homeCategoriesItem)}>
+                        <CategoryItem
+                            name={item.name}
+                            image={item.image}
+                            link={item.link}
+
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
     )
 }