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] :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>
     )
 }