blob: 127904eef092f5feda7867603d53d34d038f2213 (
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
|
import odooApi from '@/core/api/odooApi'
import { createSlug } from '@/core/utils/slug'
import {
Breadcrumb as ChakraBreadcrumb,
BreadcrumbItem,
BreadcrumbLink,
Skeleton
} from '@chakra-ui/react'
import Link from 'next/link'
import React from 'react'
import { useQuery } from 'react-query'
/**
* Render a breadcrumb component.
*
* @param {object} categoryId - The ID of the category.
* @return {JSX.Element} The breadcrumb component.
*/
const Breadcrumb = ({ categoryId }) => {
const breadcrumbs = useQuery(
`category-breadcrumbs/${categoryId}`,
async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
)
return (
<div className='container mx-auto py-4 md:py-6'>
<Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
<ChakraBreadcrumb>
<BreadcrumbItem>
<BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
Home
</BreadcrumbLink>
</BreadcrumbItem>
{breadcrumbs.data?.map((category, index) => (
<BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
{index === breadcrumbs.data.length - 1 ? (
<BreadcrumbLink className='whitespace-nowrap'>{category.name}</BreadcrumbLink>
) : (
<BreadcrumbLink
as={Link}
href={createSlug('/shop/category/', category.name, category.id)}
className='!text-danger-500 whitespace-nowrap'
>
{category.name}
</BreadcrumbLink>
)}
</BreadcrumbItem>
))}
</ChakraBreadcrumb>
</Skeleton>
</div>
)
}
export default Breadcrumb
|
