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/2] :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/2] :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) => {