crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance: logic code breadcrumb common

Browse Source
This commit is contained in:
lytrankieio123
2021-09-07 09:19:39 +07:00
parent e8e220c7ef
commit fc5cdada6a
4 changed files with 44 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
View File

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

66
src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
View File

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

3
src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
View File

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