From 900c3633ed58fc885755b12413e98a5ecf8a227f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Fri, 27 Aug 2021 10:21:35 +0700
Subject: [PATCH] :bug: bug: style home categories

:%s
---
 pages/index.tsx                               | 43 +---------
 .../CategoriesItem/CategoryItem.module.scss   | 76 +++---------------
 .../CategoriesItem/CategoryItem.tsx           | 20 +++--
 .../HomeCategories/HomeCategories.module.scss | 46 +++--------
 .../home/HomeCategories/HomeCategories.tsx    | 80 ++++++++++++++-----
 5 files changed, 96 insertions(+), 169 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 702aee564..7107151fd 100644
--- a/pages/index.tsx
+++ b/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 />
     </>
   )
 }
diff --git a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss
index a769202ab..136e002c1 100644
--- a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss
+++ b/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;
-//         }
-//     }
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx
index dbedf8ef4..64046c1b3 100644
--- a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx
+++ b/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 >
     )
 }
 
diff --git a/src/components/modules/home/HomeCategories/HomeCategories.module.scss b/src/components/modules/home/HomeCategories/HomeCategories.module.scss
index 8fb8149f8..b1f5a6ee9 100644
--- a/src/components/modules/home/HomeCategories/HomeCategories.module.scss
+++ b/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%;
             }
         }
     }
-   
-   
 }
diff --git a/src/components/modules/home/HomeCategories/HomeCategories.tsx b/src/components/modules/home/HomeCategories/HomeCategories.tsx
index 3393b6916..aca113de3 100644
--- a/src/components/modules/home/HomeCategories/HomeCategories.tsx
+++ b/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>
     )
 }