blob: f41859a94f51de2baad27f215f971f758b1cc2b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React, { Fragment } from 'react'
import { useQuery } from 'react-query'
import { getProductCategoryBreadcrumb } from '~/services/product'
import Link from 'next/link'
import { createSlug } from '~/libs/slug'
type Props = {
id: number,
name: string
}
const Breadcrumb = ({ id, name }: Props) => {
const query = useQuery({
queryKey: ['product-category-breadcrumb'],
queryFn: () => getProductCategoryBreadcrumb(id),
refetchOnWindowFocus: false
})
const breadcrumbs = query.data || []
return (
<div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
<Link href='/' className='text-danger-500'>Home</Link>
<span className='mx-2'>/</span>
{breadcrumbs.map((category, index) => (
<Fragment key={index}>
<Link
href={createSlug('/shop/category/', category.name, category.id.toString())}
className='text-danger-500'
>
{category.name}
</Link>
<span className='mx-2'>/</span>
</Fragment>
))}
<span>{name}</span>
</div>
)
}
export default Breadcrumb
|
