crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 11:51:20 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/test.tsx
View File

@ -5,6 +5,7 @@ import {
ModalCommon,
ProductCarousel,
} from 'src/components/common'
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
import { CollectionCarcousel } from 'src/components/modules/home'
import image5 from '../public/assets/images/image5.png'
import image6 from '../public/assets/images/image6.png'
@ -96,6 +97,21 @@ const dataTest = [
imageSrc: image6.src,
},
]
const crumbs = [
{
name: 'Product',
link: '/product',
},
{
name: 'Detail',
link: '/detail',
},
{
name: 'more',
link: '/more',
}
]
export default function Test() {
const [visible, setVisible] = useState(false)
const onClose = () => {
@ -106,6 +122,10 @@ export default function Test() {
}
return (
<>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
<BreadcrumbCommon crumbs={crumbs} showHomePage={true}/>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus tenetur repudiandae assumenda iste enim! Hic voluptas minus quos ipsa reprehenderit.
<ButtonCommon onClick={onOpen}>open</ButtonCommon>
<ModalCommon visible={visible} onClose={onClose}>
<div className="">

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

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

58
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 && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
}
{
crumbs.length > 0 && <>
{
!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}>
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>
</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>
)
}