From a078561462fb33f24d838c974894b3fc7d6c9eb7 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 26 Aug 2025 12:54:05 +0700
Subject: <Miqdad> sementara

---
 src/lib/category/components/Breadcrumb.jsx | 177 ++++++++++++++++++++++++-----
 1 file changed, 150 insertions(+), 27 deletions(-)

(limited to 'src/lib/category/components')

diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index 127904ee..b369d781 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -1,45 +1,168 @@
-import odooApi from '@/core/api/odooApi'
-import { createSlug } from '@/core/utils/slug'
+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.
- */
+  Skeleton,
+} from '@chakra-ui/react';
+import Link from 'next/link';
+import React from 'react';
+import { useQuery } from 'react-query';
+import useDevice from '@/core/hooks/useDevice';
+
 const Breadcrumb = ({ categoryId }) => {
+  const { isDesktop, isMobile } = useDevice();
+
   const breadcrumbs = useQuery(
-    `category-breadcrumbs/${categoryId}`,
-    async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
-  )
+    ['category-breadcrumbs', categoryId],
+    async () =>
+      await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
+  );
+
+  const cats = breadcrumbs.data ?? [];
+  const total = cats.length;
+
+  const showEllipsis = total > 2;
+  const parent = total >= 2 ? cats[total - 2] : null;
+  const last = total ? cats[total - 1] : null;
+  const hiddenText = showEllipsis
+    ? cats
+        .slice(0, total - 2)
+        .map((c) => c.name)
+        .join(' / ')
+    : '';
+
+  // ===== MOBILE: 2 BARIS -> (1) Home/..//Parent  (2) Last (wrap) =====
+  if (isMobile) {
+    return (
+      <div className='container mx-auto py-4 md:py-6'>
+        <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-11/12'>
+          {/* Baris 1 */}
+          <ChakraBreadcrumb>
+            <BreadcrumbItem>
+              <BreadcrumbLink as={Link} href='/' className='!text-danger-500'>
+                Home
+              </BreadcrumbLink>
+            </BreadcrumbItem>
 
+            {showEllipsis && (
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  className='!text-danger-500'
+                  title={hiddenText}
+                  aria-label='Kategori tersembunyi'
+                >
+                  ..
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            )}
+
+            {parent && (
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  as={Link}
+                  href={createSlug('/shop/category/', parent.name, parent.id)}
+                  className='!text-danger-500'
+                >
+                  {parent.name}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            )}
+          </ChakraBreadcrumb>
+
+          {/* Baris 2 */}
+          {last && (
+            <ChakraBreadcrumb className='mt-1'>
+              <BreadcrumbItem isCurrentPage>
+                <BreadcrumbLink className='whitespace-normal break-words leading-6'>
+                  {last.name}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </ChakraBreadcrumb>
+          )}
+        </Skeleton>
+      </div>
+    );
+  }
+
+  // ===== DESKTOP: biarkan seperti semula =====
+  if (isDesktop) {
+    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>
+
+            {cats.map((category, index) => (
+              <BreadcrumbItem
+                key={index}
+                isCurrentPage={index === cats.length - 1}
+              >
+                {index === cats.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>
+    );
+  }
+
+  // Fallback → layout desktop
   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'>
+            <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>
+          {cats.map((category, index) => (
+            <BreadcrumbItem
+              key={index}
+              isCurrentPage={index === cats.length - 1}
+            >
+              {index === cats.length - 1 ? (
+                <BreadcrumbLink className='whitespace-nowrap'>
+                  {category.name}
+                </BreadcrumbLink>
               ) : (
                 <BreadcrumbLink
                   as={Link}
-                  href={createSlug('/shop/category/', category.name, category.id)}
+                  href={createSlug(
+                    '/shop/category/',
+                    category.name,
+                    category.id
+                  )}
                   className='!text-danger-500 whitespace-nowrap'
                 >
                   {category.name}
@@ -50,7 +173,7 @@ const Breadcrumb = ({ categoryId }) => {
         </ChakraBreadcrumb>
       </Skeleton>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
+export default Breadcrumb;
-- 
cgit v1.2.3