blob: 0554dba592ff7f5f6a74711bd5cb3882720537b6 (
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import odooApi from '@/core/api/odooApi'
import { createSlug } from '@/core/utils/slug'
import {
Breadcrumb as ChakraBreadcrumb,
BreadcrumbItem,
BreadcrumbLink,
Skeleton
} from '@chakra-ui/react'
import classNames from 'classnames'
import Link from 'next/link'
import { useQuery } from 'react-query'
/**
* Renders a breadcrumb component based on the provided `productId`.
*
* @param {Object} props - The properties passed to the component.
* @param {number} props.productId - The ID of the product.
* @param {string} props.productName - The ID of the product.
* @return {ReactElement} The rendered breadcrumb component.
*/
const Breadcrumb = ({ productId, productName }) => {
const categories = useQuery(
`detail/categories/${productId}`,
async () => await odooApi('GET', `/api/v1/product/${productId}/category-breadcrumb`),
{
enabled: !!productId
}
)
return (
<Skeleton
isLoaded={!categories.isLoading}
className={classNames({
'w-2/3': categories.isLoading,
'w-full': !categories.isLoading
})}
>
<ChakraBreadcrumb
mb={10}
overflowX={'auto'}
className='text-caption-2 md:text-body-2 p-4 md:p-0'
>
<BreadcrumbItem>
<BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
Home
</BreadcrumbLink>
</BreadcrumbItem>
{categories.data?.map((category) => (
<BreadcrumbItem key={category.id}>
<BreadcrumbLink
as={Link}
href={createSlug('/shop/category/', category.name, category.id)}
className='!text-danger-500 whitespace-nowrap'
>
{category.name}
</BreadcrumbLink>
</BreadcrumbItem>
))}
<BreadcrumbItem isCurrentPage>
<BreadcrumbLink className='whitespace-nowrap'>{productName}</BreadcrumbLink>
</BreadcrumbItem>
</ChakraBreadcrumb>
</Skeleton>
)
}
export default Breadcrumb
|
