diff options
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 72 | ||||
| -rw-r--r-- | src/pages/searchkey/[slug].jsx | 4 |
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} />} |