From 185601f002858a643c2beae4a60e516802d60c70 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 30 Aug 2021 16:46:52 +0700
Subject: [PATCH 1/7] :sparkles: feat: Breadcrumb Common

---
 .../BreadcrumbCommon.module.scss              |  6 +++
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     | 54 +++++++++++++++++++
 .../BreadcrumbItem/BreadcrumbItem.tsx         | 17 ++++++
 .../BreadcrumbSeparator.tsx                   | 15 ++++++
 4 files changed, 92 insertions(+)
 create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
 create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
 create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
 create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx

diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
new file mode 100644
index 000000000..6741f386c
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+    @apply spacing-horizontal-left;
+    color: var(--text-base);
+}
\ No newline at end of file
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
new file mode 100644
index 000000000..8b36f7e50
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import s from './BreadcrumbCommon.module.scss'
+
+import { useRouter } from 'next/router'
+
+import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
+import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
+
+const BreadcrumbCommon = () => {
+
+    const paths: string | any = {
+        "/": "Home",
+        "fresh-product-today" : "Fresh Product Today",
+        "product-list": "Product List",
+        "recipes-list": "Recipes List",
+        "blogs": "Blog",
+        "account": "Account",
+        "delivery&policy": "Delivery & Policy",
+        "product-detail": "Product Detail",
+        "recipes-detail": "Recipes Detail",
+        "blog-detail": "Blog Detail"
+    }
+
+    const router = useRouter();
+    let crumbs = router.route.split('/');
+
+    return (
+        <section className={s.breadcrumbCommon}>
+            <BreadcrumbItem text="Home" href="/" />
+            {
+                crumbs.map((crumb, i) => {
+                    if (crumb === "") {
+                        return
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={i}>
+                                <BreadcrumbItem text={`${paths[crumb]}`} href="#" />
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={i}>
+                            <BreadcrumbItem text={`${paths[crumb]}`} href={`/${paths[crumb]}`} />
+                        </BreadcrumbSeparator>
+                    )
+                })
+            }
+        </section>
+    )
+
+}
+
+export default BreadcrumbCommon
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
new file mode 100644
index 000000000..9a501c93f
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Link from 'next/link'
+
+interface BreadcrumbItemProps {
+    text: string;
+    href: string;
+}
+
+const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
+    return (
+        <Link href={`${href}`}>
+            {text}
+        </Link>
+    )
+}
+
+export default BreadcrumbItem
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
new file mode 100644
index 000000000..c877e60bc
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface BreadcrumbSeparatorProps {
+    children: any;
+}
+
+const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
+    return (
+        <span>
+            &nbsp;/&nbsp;{children}
+        </span>
+    )
+}
+
+export default BreadcrumbSeparator

From 8c7c57175d50dfc9a9fd10ef03cae700e3c89e33 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Tue, 31 Aug 2021 10:44:11 +0700
Subject: [PATCH 2/7] :sparkles: feat: Breadcrumbs Common

---
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     | 37 +++++++------------
 .../BreadcrumbItem/BreadcrumbItem.tsx         |  4 +-
 .../BreadcrumbSeparator.tsx                   |  2 +-
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 8b36f7e50..615a26893 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -1,54 +1,43 @@
 import React from 'react'
 import s from './BreadcrumbCommon.module.scss'
 
-import { useRouter } from 'next/router'
-
 import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
 import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
 
-const BreadcrumbCommon = () => {
+interface BreadcrumbCommonProps {
+    crumbs: { link:string, name:string }[];
+    showHomePage?: boolean;
+}
 
-    const paths: string | any = {
-        "/": "Home",
-        "fresh-product-today" : "Fresh Product Today",
-        "product-list": "Product List",
-        "recipes-list": "Recipes List",
-        "blogs": "Blog",
-        "account": "Account",
-        "delivery&policy": "Delivery & Policy",
-        "product-detail": "Product Detail",
-        "recipes-detail": "Recipes Detail",
-        "blog-detail": "Blog Detail"
+const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
+    if (showHomePage) {
+        crumbs.unshift({link: "/", name: "Home"});
     }
-
-    const router = useRouter();
-    let crumbs = router.route.split('/');
-
     return (
         <section className={s.breadcrumbCommon}>
-            <BreadcrumbItem text="Home" href="/" />
             {
                 crumbs.map((crumb, i) => {
-                    if (crumb === "") {
-                        return
+                    if (i === 0) {
+                        return (
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        )
                     }
                     if (i === crumbs.length-1) {
                         return (
                             <BreadcrumbSeparator key={i}>
-                                <BreadcrumbItem text={`${paths[crumb]}`} href="#" />
+                                <BreadcrumbItem key={i} text={crumb.name} href="#" />
                             </BreadcrumbSeparator>
                         )
                     }
                     return (
                         <BreadcrumbSeparator key={i}>
-                            <BreadcrumbItem text={`${paths[crumb]}`} href={`/${paths[crumb]}`} />
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
                         </BreadcrumbSeparator>
                     )
                 })
             }
         </section>
     )
-
 }
 
 export default BreadcrumbCommon
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
index 9a501c93f..f807de555 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -8,8 +8,8 @@ interface BreadcrumbItemProps {
 
 const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
     return (
-        <Link href={`${href}`}>
-            {text}
+        <Link href={href}>
+            <a>{text}</a>
         </Link>
     )
 }
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
index c877e60bc..370c342d8 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface BreadcrumbSeparatorProps {
-    children: any;
+    children?: React.ReactNode
 }
 
 const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {

From e1c3acb4625f3c6424f05205350b0162df0baecc Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Mon, 6 Sep 2021 10:15:43 +0700
Subject: [PATCH 3/7] :sparkles: feat: Breadcrumb Common

---
 .../common/BreadcrumbCommon/BreadcrumbCommon.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 615a26893..a343ac55e 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -19,19 +19,19 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps)
                 crumbs.map((crumb, i) => {
                     if (i === 0) {
                         return (
-                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
                         )
                     }
                     if (i === crumbs.length-1) {
                         return (
-                            <BreadcrumbSeparator key={i}>
-                                <BreadcrumbItem key={i} text={crumb.name} href="#" />
+                            <BreadcrumbSeparator key={crumb.name}>
+                                <span>{crumb.name}</span>
                             </BreadcrumbSeparator>
                         )
                     }
                     return (
-                        <BreadcrumbSeparator key={i}>
-                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        <BreadcrumbSeparator key={crumb.name}>
+                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
                         </BreadcrumbSeparator>
                     )
                 })

From 361911e328d621bbbb7d0ccb920dfa5783a007b0 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Mon, 6 Sep 2021 10:48:01 +0700
Subject: [PATCH 4/7] :art: style: update style

---
 .../common/BreadcrumbCommon/BreadcrumbCommon.module.scss       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index 6741f386c..d72ea413b 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -1,6 +1,5 @@
 @import '../../../styles/utilities';
 
 .breadcrumbCommon {
-    @apply spacing-horizontal-left;
     color: var(--text-base);
-}
\ No newline at end of file
+}

From e8e220c7ef5143f68df90bce3f4a2e7df6ff18aa Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Mon, 6 Sep 2021 12:10:24 +0700
Subject: [PATCH 5/7] :sparkles: feat: Breadcrumb Common

---
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index a343ac55e..98feb9628 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -10,13 +10,10 @@ interface BreadcrumbCommonProps {
 }
 
 const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
-    if (showHomePage) {
-        crumbs.unshift({link: "/", name: "Home"});
-    }
     return (
         <section className={s.breadcrumbCommon}>
             {
-                crumbs.map((crumb, i) => {
+                showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
                     if (i === 0) {
                         return (
                             <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
@@ -36,6 +33,31 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps)
                     )
                 })
             }
+
+            {
+                !showHomePage && crumbs.map((crumb, i) => {
+                    if (i === 0) {
+                        return
+                    }
+                    if (i === 1) {
+                        return (
+                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
+                        )
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={crumb.name}>
+                                <span>{crumb.name}</span>
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={crumb.name}>
+                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                        </BreadcrumbSeparator>
+                    )
+                })
+            }
         </section>
     )
 }

From fc5cdada6abe4cad0720920371e9e2dd909e87c6 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 7 Sep 2021 09:19:39 +0700
Subject: [PATCH 6/7] enhance: logic code breadcrumb common

---
 pages/test.tsx                                | 20 ++++++
 .../BreadcrumbCommon.module.scss              |  3 +
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     | 66 ++++++-------------
 .../BreadcrumbItem/BreadcrumbItem.tsx         |  3 +-
 4 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 5ac220819..90a46681f 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -5,6 +5,7 @@ import {
   ModalCommon,
   ProductCarousel,
 } from 'src/components/common'
+import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
 import { CollectionCarcousel } from 'src/components/modules/home'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
@@ -96,6 +97,21 @@ const dataTest = [
     imageSrc: image6.src,
   },
 ]
+
+const crumbs = [
+  {
+    name: 'Product',
+    link: '/product',
+  },
+  {
+    name: 'Detail',
+    link: '/detail',
+  },
+  {
+    name: 'more',
+    link: '/more',
+  }
+]
 export default function Test() {
   const [visible, setVisible] = useState(false)
   const onClose = () => {
@@ -106,6 +122,10 @@ export default function Test() {
   }
   return (
     <>
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
+
+    <BreadcrumbCommon crumbs={crumbs} showHomePage={true}/>
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
       <ModalCommon visible={visible} onClose={onClose}>
         <div className="">
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index d72ea413b..8f6c05bf7 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -2,4 +2,7 @@
 
 .breadcrumbCommon {
     color: var(--text-base);
+    .currentItem {
+        cursor: default;
+    }
 }
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 98feb9628..6ad2e6817 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -1,64 +1,36 @@
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import s from './BreadcrumbCommon.module.scss'
-
 import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
 import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
 
 interface BreadcrumbCommonProps {
-    crumbs: { link:string, name:string }[];
+    crumbs: { link: string, name: string }[];
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
+const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
     return (
         <section className={s.breadcrumbCommon}>
             {
-                showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
-                    if (i === 0) {
-                        return (
-                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
-                        )
-                    }
-                    if (i === crumbs.length-1) {
-                        return (
-                            <BreadcrumbSeparator key={crumb.name}>
-                                <span>{crumb.name}</span>
-                            </BreadcrumbSeparator>
-                        )
-                    }
-                    return (
-                        <BreadcrumbSeparator key={crumb.name}>
-                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
-                        </BreadcrumbSeparator>
-                    )
-                })
-            }
 
-            {
-                !showHomePage && crumbs.map((crumb, i) => {
-                    if (i === 0) {
-                        return
-                    }
-                    if (i === 1) {
-                        return (
-                            <BreadcrumbItem key={crumb.name} text={crumb.name} href={crumb.link} />
-                        )
-                    }
-                    if (i === crumbs.length-1) {
-                        return (
-                            <BreadcrumbSeparator key={crumb.name}>
-                                <span>{crumb.name}</span>
-                            </BreadcrumbSeparator>
-                        )
-                    }
-                    return (
-                        <BreadcrumbSeparator key={crumb.name}>
-                            <BreadcrumbItem text={crumb.name} href={crumb.link} />
-                        </BreadcrumbSeparator>
-                    )
-                })
+                showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
             }
-        </section>
+            {
+                crumbs.length > 0 && <>
+
+                    {
+                        crumbs.slice(0, crumbs.length - 1).map((crumb) => (
+                            < BreadcrumbSeparator key={crumb.name}>
+                                <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                            </BreadcrumbSeparator>
+                        ))}
+                    < BreadcrumbSeparator>
+                        <span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
+                    </BreadcrumbSeparator>
+                </>
+            }
+        </section >
     )
 }
 
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
index f807de555..13f980ea9 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import s from './BreadcrumbItem.module.scss'
 
 interface BreadcrumbItemProps {
     text: string;
@@ -9,7 +10,7 @@ interface BreadcrumbItemProps {
 const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
     return (
         <Link href={href}>
-            <a>{text}</a>
+            <a className={s.breadcrumbItem}>{text}</a>
         </Link>
     )
 }

From 9c0d63cda01e4a57d7df7666dd003b7aa3938795 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 7 Sep 2021 09:19:54 +0700
Subject: [PATCH 7/7] :art: styles: change color when hover breadcrumb item

:%s
---
 .../components/BreadcrumbItem/BreadcrumbItem.module.scss     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss

diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
new file mode 100644
index 000000000..3a785f480
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
@@ -0,0 +1,5 @@
+.breadcrumbItem {
+    &:hover {
+        color: var(--primary);
+    }
+}