Add breadcrumb on detail product, search, brand, category page

2 files changed, 42 insertions, 2 deletions

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index 3c411969..3985b888 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -84,7 +84,7 @@ const Brand = ({ id }) => {
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto mt-10 mb-3'>
+        <div className='container mx-auto'>
           <div className='min-h-[150px]'>
             {brand.isLoading && <ImageSkeleton />}
             {brand.data?.banners?.length == 0 && (
@@ -117,6 +117,7 @@ const Brand = ({ id }) => {
                     </SwiperSlide>
                   ))}
                 </Swiper>
+
                 <div className='p-4'>
                   <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
                   {brand?.data?.logo && (
@@ -137,7 +138,6 @@ const Brand = ({ id }) => {
               </>
             )}
           </div>
-          <Divider />
         </div>
       </DesktopView>
     </>
diff --git a/src/lib/brand/components/Breadcrumb.jsx b/src/lib/brand/components/Breadcrumb.jsx
new file mode 100644
index 00000000..0fec2dad
--- /dev/null
+++ b/src/lib/brand/components/Breadcrumb.jsx
@@ -0,0 +1,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