diff options
Diffstat (limited to 'src/lib/category/components')
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 46 |
1 files changed, 31 insertions, 15 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx index 8579bb14..29bc9c0a 100644 --- a/src/lib/category/components/Breadcrumb.jsx +++ b/src/lib/category/components/Breadcrumb.jsx @@ -11,17 +11,18 @@ import React from 'react'; import { useQuery } from 'react-query'; import useDevice from '@/core/hooks/useDevice'; -const Breadcrumb = ({ categoryId, shortDesc }) => { +const Breadcrumb = ({ categoryId, shortDesc, currentLabel }) => { const breadcrumbs = useQuery( ['category-breadcrumbs', categoryId], async () => - await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`) + await odooApi( + 'GET', + `/api/v1/category/${categoryId}/category-breadcrumb`, + ), ); const { isDesktop, isMobile } = useDevice(); - const items = breadcrumbs.data ?? []; - const lastIdx = items.length - 1; /* ========================= DESKTOP @@ -58,29 +59,40 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { {/* 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( '/shop/category/', category.name, - category.id + category.id, )} className='!text-danger-500' > {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> {shortDesc && ( @@ -119,6 +131,8 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { .join(' / ') : ''; + const finalLabel = currentLabel || lastCat?.name; + return ( <div className='container mx-auto py-2 mt-2'> <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-full'> @@ -152,6 +166,7 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { </BreadcrumbLink> </BreadcrumbItem> + {/* Jika ada kategori sebelum secondLast, tampilkan '..' (link ke beforeSecond) */} {beforeSecond && ( <BreadcrumbItem> <BreadcrumbLink @@ -159,7 +174,7 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { href={createSlug( '/shop/category/', beforeSecond.name, - beforeSecond.id + beforeSecond.id, )} title={hiddenText} className='!text-danger-500' @@ -176,7 +191,7 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { href={createSlug( '/shop/category/', secondLast.name, - secondLast.id + secondLast.id, )} className='!text-danger-500' > @@ -185,6 +200,7 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { </BreadcrumbItem> )} + {/* lastCat (current) dengan truncate & lebar dibatasi */} {lastCat && ( <BreadcrumbItem isCurrentPage> <span @@ -192,7 +208,7 @@ const Breadcrumb = ({ categoryId, shortDesc }) => { style={{ maxWidth: '60vw' }} title={lastCat.name} > - {lastCat.name} + {finalLabel} </span> </BreadcrumbItem> )} |