diff options
Diffstat (limited to 'src/lib/category/components')
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 180 |
1 files changed, 44 insertions, 136 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx index b369d781..e691e379 100644 --- a/src/lib/category/components/Breadcrumb.jsx +++ b/src/lib/category/components/Breadcrumb.jsx @@ -9,106 +9,57 @@ import { 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`) ); - 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> - ); - } + const items = breadcrumbs.data ?? []; + const lastIdx = items.length - 1; - // ===== 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> + return ( + <div className='container mx-auto py-4 md:py-6'> + <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'> + <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'> + Home + </BreadcrumbLink> + </BreadcrumbItem> - {cats.map((category, index) => ( - <BreadcrumbItem - key={index} - isCurrentPage={index === cats.length - 1} - > - {index === cats.length - 1 ? ( - <BreadcrumbLink className='whitespace-nowrap'> + {/* 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> ) : ( @@ -119,57 +70,14 @@ const Breadcrumb = ({ categoryId }) => { category.name, category.id )} - className='!text-danger-500 whitespace-nowrap' + className='!text-danger-500' > {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' - > - 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> |