diff options
Diffstat (limited to 'src/lib/category')
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 177 |
1 files changed, 150 insertions, 27 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx index 127904ee..b369d781 100644 --- a/src/lib/category/components/Breadcrumb.jsx +++ b/src/lib/category/components/Breadcrumb.jsx @@ -1,45 +1,168 @@ -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' - -/** - * Render a breadcrumb component. - * - * @param {object} categoryId - The ID of the category. - * @return {JSX.Element} The breadcrumb component. - */ + Skeleton, +} from '@chakra-ui/react'; +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`) - ) + ['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> + ); + } + + // ===== 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> + + {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> + ); + } + + // 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'> + <BreadcrumbLink + as={Link} + href='/' + className='!text-danger-500 whitespace-nowrap' + > 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> + {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)} + href={createSlug( + '/shop/category/', + category.name, + category.id + )} className='!text-danger-500 whitespace-nowrap' > {category.name} @@ -50,7 +173,7 @@ const Breadcrumb = ({ categoryId }) => { </ChakraBreadcrumb> </Skeleton> </div> - ) -} + ); +}; -export default Breadcrumb +export default Breadcrumb; |