2 files changed, 57 insertions, 1 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
new file mode 100644
index 00000000..127904ee
--- /dev/null
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -0,0 +1,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
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index af696d42..e6ea5acf 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -30,7 +30,7 @@ const Category = () => {
   return (
     <DesktopView>
       <div className='category-mega-box'>
-        {categories.map((category) => (
+        {categories?.map((category) => (
           <div key={category.id}>
             <Link
               href={createSlug('/shop/category/', category.name, category.id)}