Merge branch 'm3-sonnguyen' of https://github.com/KieIO/grocery-vercel-commerce into m5-tan

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

@@ -0,0 +1,6 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+    @apply spacing-horizontal-left;
+    color: var(--text-base);
+}

src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+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) => {
+    if (showHomePage) {
+        crumbs.unshift({link: "/", name: "Home"});
+    }
+    return (
+        <section className={s.breadcrumbCommon}>
+            {
+                crumbs.map((crumb, i) => {
+                    if (i === 0) {
+                        return (
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        )
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={i}>
+                                <BreadcrumbItem key={i} text={crumb.name} href="#" />
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={i}>
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        </BreadcrumbSeparator>
+                    )
+                })
+            }
+        </section>
+    )
+}
+
+export default BreadcrumbCommon

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}>
+            <a>{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