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

merge: override BreadCrumb Common

Browse Source
This commit is contained in:
unknown
2021-09-10 11:48:42 +07:00
parent 0299c30829
commit 8848065674
2 changed files with 18 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils'
import s from './BreadcrumbCommon.module.scss' import s from './BreadcrumbCommon.module.scss'
import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
@@ -8,56 +9,29 @@ interface BreadcrumbCommonProps {
showHomePage?: boolean; showHomePage?: boolean;
} }
const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => { const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
return ( return (
<section className={s.breadcrumbCommon}> <section className={s.breadcrumbCommon}>
{ {
showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
if (i === 0) { showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
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) => { crumbs.length > 0 && <>
if (i === 0) {
return {
} crumbs.slice(0, crumbs.length - 1).map((crumb) => (
if (i === 1) { < BreadcrumbSeparator key={crumb.name}>
return ( <BreadcrumbItem text={crumb.name} href={crumb.link} />
<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> </BreadcrumbSeparator>
) ))}
} < BreadcrumbSeparator>
return ( <span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
<BreadcrumbSeparator key={crumb.name}> </BreadcrumbSeparator>
<BreadcrumbItem text={crumb.name} href={crumb.link} /> </>
</BreadcrumbSeparator>
)
})
} }
</section> </section >
) )
} }
export default BreadcrumbCommon export default BreadcrumbCommon

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

@@ -15,4 +15,4 @@ const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
) )
} }
export default BreadcrumbItem export default BreadcrumbItem