enhance: logic code breadcrumb common

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="">

src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss

@@ -2,4 +2,7 @@
 
 .breadcrumbCommon {
     color: var(--text-base);
+    .currentItem {
+        cursor: default;
+    }
 }

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 && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
-                !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>
+            {
+                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 >
     )
 }
 

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