Merged in cr/prod-detail (pull request #449)

Cr/prod detail

1 files changed, 67 insertions, 36 deletions

diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx
index 127904ee..e691e379 100644
--- a/src/lib/category/components/Breadcrumb.jsx
+++ b/src/lib/category/components/Breadcrumb.jsx
@@ -1,56 +1,87 @@
-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'
+  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`)
-  )
+    ['category-breadcrumbs', categoryId],
+    async () =>
+      await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
+  );
+
+  const items = breadcrumbs.data ?? [];
+  const lastIdx = items.length - 1;
 
   return (
     <div className='container mx-auto py-4 md:py-6'>
       <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
-        <ChakraBreadcrumb>
+        <ChakraBreadcrumb
+          spacing='8px'
+          sx={{
+            // mobile boleh wrap; desktop tetap 1 baris
+            '& ol': {
+              display: 'flex',
+              flexWrap: { base: 'wrap', md: 'nowrap' },
+              alignItems: 'center',
+            },
+            '& li': { display: 'inline-flex', alignItems: 'center' },
+            // semua item sebelum terakhir: jangan pernah wrap (tetap di baris atas)
+            '& li:not(:last-of-type)': {
+              flex: '0 0 auto',
+              whiteSpace: 'nowrap',
+            },
+            // item terakhir: boleh ambil sisa lebar & wrap jika perlu
+            '& li:last-of-type': {
+              flex: '1 1 auto',
+              minWidth: 0,
+            },
+          }}
+        >
+          {/* Home */}
           <BreadcrumbItem>
-            <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+            <BreadcrumbLink as={Link} href='/' className='!text-danger-500'>
               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>
-          ))}
+          {/* Categories */}
+          {items.map((category, index) => {
+            const isLast = index === lastIdx;
+            return (
+              <BreadcrumbItem key={index} isCurrentPage={isLast}>
+                {isLast ? (
+                  // HANYA yang terakhir boleh turun/wrap di mobile
+                  <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'>
+                    {category.name}
+                  </BreadcrumbLink>
+                ) : (
+                  <BreadcrumbLink
+                    as={Link}
+                    href={createSlug(
+                      '/shop/category/',
+                      category.name,
+                      category.id
+                    )}
+                    className='!text-danger-500'
+                  >
+                    {category.name}
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+            );
+          })}
         </ChakraBreadcrumb>
       </Skeleton>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
+export default Breadcrumb;