<Miqdad> add keyword to breadcrumb

2 files changed, 49 insertions, 27 deletions

diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index 50557c3e..acd2cbff 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -11,17 +11,19 @@ import React from 'react';
 import { useQuery } from 'react-query';
 import useDevice from '@/core/hooks/useDevice';
 
-const Breadcrumb = ({ categoryId }) => {
+const Breadcrumb = ({ categoryId, currentLabel }) => {
   const breadcrumbs = useQuery(
     ['category-breadcrumbs', categoryId],
     async () =>
       await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
   );
-  const { isDesktop, isMobile } = useDevice();
 
+  const { isDesktop, isMobile } = useDevice();
   const items = breadcrumbs.data ?? [];
-  const lastIdx = items.length - 1;
 
+  /* =========================
+     DESKTOP
+  ========================== */
   if (isDesktop) {
     return (
       <div className='container mx-auto py-4 md:py-6'>
@@ -54,14 +56,12 @@ const Breadcrumb = ({ categoryId }) => {
 
             {/* Categories */}
             {items.map((category, index) => {
-              const isLast = index === lastIdx;
+              const isLastCategory = index === items.length - 1;
+              const isClickable = currentLabel || !isLastCategory;
+
               return (
-                <BreadcrumbItem key={index} isCurrentPage={isLast}>
-                  {isLast ? (
-                    <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'>
-                      {category.name}
-                    </BreadcrumbLink>
-                  ) : (
+                <BreadcrumbItem key={index} isCurrentPage={!isClickable}>
+                  {isClickable ? (
                     <BreadcrumbLink
                       as={Link}
                       href={createSlug(
@@ -73,22 +73,38 @@ const Breadcrumb = ({ categoryId }) => {
                     >
                       {category.name}
                     </BreadcrumbLink>
+                  ) : (
+                    <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'>
+                      {category.name}
+                    </BreadcrumbLink>
                   )}
                 </BreadcrumbItem>
               );
             })}
+
+            {/* Searchkey / Current Page */}
+            {currentLabel && (
+              <BreadcrumbItem isCurrentPage>
+                <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'>
+                  {currentLabel}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            )}
           </ChakraBreadcrumb>
         </Skeleton>
       </div>
     );
   }
 
+  /* =========================
+     MOBILE
+  ========================== */
   if (isMobile) {
-    const items = breadcrumbs.data ?? [];
     const n = items.length;
-    const lastCat = n >= 1 ? items[n - 1] : null; // terakhir (current)
-    const secondLast = n >= 2 ? items[n - 2] : null; // sebelum current
-    const beforeSecond = n >= 3 ? items[n - 3] : null; // sebelum secondLast
+    const lastCat = n >= 1 ? items[n - 1] : null;
+    const secondLast = n >= 2 ? items[n - 2] : null;
+    const beforeSecond = n >= 3 ? items[n - 3] : null;
+
     const hiddenText =
       n >= 3
         ? items
@@ -97,19 +113,21 @@ const Breadcrumb = ({ categoryId }) => {
             .join(' / ')
         : '';
 
+    const finalLabel = currentLabel || lastCat?.name;
+
     return (
       <div className='container mx-auto py-2 mt-2'>
         <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-full'>
           <ChakraBreadcrumb
-            separator={<span className='mx-1'>/</span>} // lebih rapat
+            separator={<span className='mx-1'>/</span>}
             spacing='4px'
             sx={{
               '& ol': {
                 display: 'flex',
                 alignItems: 'center',
-                overflow: 'hidden', // untuk ellipsis
-                whiteSpace: 'nowrap', // untuk ellipsis
-                gap: '0', // no extra gap
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                gap: '0',
               },
               '& li': { display: 'inline-flex', alignItems: 'center' },
               '& li:not(:last-of-type)': {
@@ -117,7 +135,7 @@ const Breadcrumb = ({ categoryId }) => {
                 whiteSpace: 'nowrap',
               },
               '& li:last-of-type': {
-                flex: '0 1 auto', // jangan ambil full space biar gak keliatan “space kosong”
+                flex: '0 1 auto',
                 minWidth: 0,
               },
             }}
@@ -130,7 +148,7 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbLink>
             </BreadcrumbItem>
 
-            {/* Jika ada kategori sebelum secondLast, tampilkan '..' (link ke beforeSecond) */}
+            {/* Ellipsis */}
             {beforeSecond && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -149,7 +167,7 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbItem>
             )}
 
-            {/* secondLast sebagai link (kalau ada) */}
+            {/* Second last category */}
             {secondLast && (
               <BreadcrumbItem>
                 <BreadcrumbLink
@@ -166,15 +184,15 @@ const Breadcrumb = ({ categoryId }) => {
               </BreadcrumbItem>
             )}
 
-            {/* lastCat (current) dengan truncate & lebar dibatasi */}
-            {lastCat && (
+            {/* Current */}
+            {finalLabel && (
               <BreadcrumbItem isCurrentPage>
                 <span
                   className='inline-block truncate align-bottom'
-                  style={{ maxWidth: '60vw' }} // batasi lebar supaya gak “makan” baris & keliatan space kosong
-                  title={lastCat.name}
+                  style={{ maxWidth: '60vw' }}
+                  title={finalLabel}
                 >
-                  {lastCat.name}
+                  {finalLabel}
                 </span>
               </BreadcrumbItem>
             )}
@@ -183,6 +201,8 @@ const Breadcrumb = ({ categoryId }) => {
       </div>
     );
   }
+
+  return null;
 };
 
 export default Breadcrumb;
diff --git a/src/pages/searchkey/[slug].jsx b/src/pages/searchkey/[slug].jsx
index a23f11b0..82179b7d 100644
--- a/src/pages/searchkey/[slug].jsx
+++ b/src/pages/searchkey/[slug].jsx
@@ -85,7 +85,9 @@ export default function FindPage() {
       />
 
       {/* ✅ Breadcrumb (auto fetch via component) */}
-      {categoryId && <Breadcrumb categoryId={categoryId} />}
+      {categoryId && (
+        <Breadcrumb categoryId={categoryId} currentLabel={readableSlug} />
+      )}
 
       {/* ✅ Product result */}
       {query && <ProductSearch query={query} prefixUrl={route.asPath} />}