mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Merge branch 'm3-sonnguyen' of https://github.com/KieIO/grocery-vercel-commerce into m5-tan
This commit is contained in:
@@ -0,0 +1,6 @@
|
|||||||
|
@import '../../../styles/utilities';
|
||||||
|
|
||||||
|
.breadcrumbCommon {
|
||||||
|
@apply spacing-horizontal-left;
|
||||||
|
color: var(--text-base);
|
||||||
|
}
|
43
src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
Normal file
43
src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
Normal file
@@ -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
|
@@ -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
|
@@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
interface BreadcrumbSeparatorProps {
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
/ {children}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BreadcrumbSeparator
|
Reference in New Issue
Block a user