blob: 0fec2dadb5a00cada8aa5e3799f187e294d54b77 (
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
|
import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
import Link from 'next/link'
import React from 'react'
/**
* Renders a breadcrumb component with links to navigate through different pages.
*
* @param {Object} props - The props object containing the brand name.
* @param {string} props.brandName - The name of the brand to display in the breadcrumb.
* @return {JSX.Element} The rendered breadcrumb component.
*/
const Breadcrumb = ({ brandName }) => {
return (
<div className='container mx-auto py-4 md:py-6'>
<ChakraBreadcrumb>
<BreadcrumbItem>
<BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
Home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink
as={Link}
href='/shop/brands'
className='!text-danger-500 whitespace-nowrap'
>
Brands
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
<BreadcrumbLink className='whitespace-nowrap'>{brandName}</BreadcrumbLink>
</BreadcrumbItem>
</ChakraBreadcrumb>
</div>
)
}
export default Breadcrumb
|
