Merge pull request #19 from KieIO/m3-sonnguyen

m3-sonnguyen Breadcrumb Common

pages/test.tsx

@@ -1,13 +1,8 @@
 import { useState } from 'react'
 import {
   ButtonCommon,
-  Layout,
-  ModalCommon,
-  ModalConfirm,
-  ModalInfo,
-  ProductCarousel,
+  Layout, ModalInfo
 } from 'src/components/common'
-
 export default function Test() {
   const [visible, setVisible] = useState(false)
   const onClose = () => {

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

@@ -0,0 +1,8 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+    color: var(--text-base);
+    .currentItem {
+        cursor: default;
+    }
+}

src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx

@@ -0,0 +1,37 @@
+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 }[];
+    showHomePage?: boolean;
+}
+
+const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
+    return (
+        <section className={s.breadcrumbCommon}>
+            {
+
+                showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
+            }
+            {
+                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 >
+    )
+}
+
+export default BreadcrumbCommon

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

@@ -0,0 +1,5 @@
+.breadcrumbItem {
+    &:hover {
+        color: var(--primary);
+    }
+}

src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'next/link'
+import s from './BreadcrumbItem.module.scss'
+
+interface BreadcrumbItemProps {
+    text: string;
+    href: string;
+}
+
+const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
+    return (
+        <Link href={href}>
+            <a className={s.breadcrumbItem}>{text}</a>
+        </Link>
+    )
+}
+
+export default BreadcrumbItem

src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface BreadcrumbSeparatorProps {
+    children?: React.ReactNode
+}
+
+const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
+    return (
+        <span>
+            &nbsp;/&nbsp;{children}
+        </span>
+    )
+}
+
+export default BreadcrumbSeparator