diff options
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 66 | ||||
| -rw-r--r-- | src/lib/category/components/styles/breadcrumb.module.css | 3 | ||||
| -rw-r--r-- | src/pages/shop/category/[slug].jsx | 30 |
3 files changed, 79 insertions, 20 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx index 50557c3e..8579bb14 100644 --- a/src/lib/category/components/Breadcrumb.jsx +++ b/src/lib/category/components/Breadcrumb.jsx @@ -11,17 +11,21 @@ import React from 'react'; import { useQuery } from 'react-query'; import useDevice from '@/core/hooks/useDevice'; -const Breadcrumb = ({ categoryId }) => { +const Breadcrumb = ({ categoryId, shortDesc }) => { const breadcrumbs = useQuery( ['category-breadcrumbs', categoryId], async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`) ); + 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'> @@ -79,16 +83,34 @@ const Breadcrumb = ({ categoryId }) => { })} </ChakraBreadcrumb> </Skeleton> + {shortDesc && ( + <div + className=' + w-full mt-2 + text-sm text-neutral-600 + leading-7 + text-justify + break-words + [hyphens:auto] + max-w-none + ' + > + {shortDesc} + </div> + )} </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 @@ -101,15 +123,15 @@ const Breadcrumb = ({ categoryId }) => { <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 +139,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 +152,6 @@ const Breadcrumb = ({ categoryId }) => { </BreadcrumbLink> </BreadcrumbItem> - {/* Jika ada kategori sebelum secondLast, tampilkan '..' (link ke beforeSecond) */} {beforeSecond && ( <BreadcrumbItem> <BreadcrumbLink @@ -141,7 +162,6 @@ const Breadcrumb = ({ categoryId }) => { beforeSecond.id )} title={hiddenText} - aria-label={`Kembali ke ${beforeSecond.name}`} className='!text-danger-500' > .. @@ -149,7 +169,6 @@ const Breadcrumb = ({ categoryId }) => { </BreadcrumbItem> )} - {/* secondLast sebagai link (kalau ada) */} {secondLast && ( <BreadcrumbItem> <BreadcrumbLink @@ -166,12 +185,11 @@ const Breadcrumb = ({ categoryId }) => { </BreadcrumbItem> )} - {/* lastCat (current) dengan truncate & lebar dibatasi */} {lastCat && ( <BreadcrumbItem isCurrentPage> <span className='inline-block truncate align-bottom' - style={{ maxWidth: '60vw' }} // batasi lebar supaya gak “makan” baris & keliatan space kosong + style={{ maxWidth: '60vw' }} title={lastCat.name} > {lastCat.name} @@ -180,9 +198,27 @@ const Breadcrumb = ({ categoryId }) => { )} </ChakraBreadcrumb> </Skeleton> + + {shortDesc && ( + <div + className=' + w-full mt-2 + text-sm text-neutral-600 + leading-7 + text-justify + break-words + [hyphens:auto] + max-w-none + ' + > + {shortDesc} + </div> + )} </div> ); } + + return null; }; export default Breadcrumb; diff --git a/src/lib/category/components/styles/breadcrumb.module.css b/src/lib/category/components/styles/breadcrumb.module.css new file mode 100644 index 00000000..dee4e1b4 --- /dev/null +++ b/src/lib/category/components/styles/breadcrumb.module.css @@ -0,0 +1,3 @@ +.category-short-desc { + flex: 0 0 100%; +} diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx index 11840d47..e515e3f4 100644 --- a/src/pages/shop/category/[slug].jsx +++ b/src/pages/shop/category/[slug].jsx @@ -16,13 +16,14 @@ const ProductSearch = dynamic(() => ); const CategorySection = dynamic(() => import('@/lib/product/components/CategorySection') -) +); export default function CategoryDetail() { const router = useRouter(); const { slug = '', page = 1 } = router.query; - const [dataCategories, setDataCategories] = useState([]) + const [dataCategories, setDataCategories] = useState([]); + const [shortDesc, setShortDesc] = useState(''); const categoryName = getNameFromSlug(slug); const categoryId = getIdFromSlug(slug); const q = router?.query.q || null; @@ -33,6 +34,22 @@ export default function CategoryDetail() { if (q) { query.q = q; } + useEffect(() => { + if (!router.isReady) return; + if (!categoryId) return; + + const loadShortDesc = async () => { + const res = await odooApi( + 'GET', + `/api/v1/category/${categoryId}/short-desc` + ); + + const desc = res?.shortDesc || ''; + setShortDesc(desc); + }; + + loadShortDesc(); + }, [router.isReady, categoryId]); return ( <BasicLayout> @@ -47,11 +64,14 @@ export default function CategoryDetail() { ]} /> - <Breadcrumb categoryId={categoryId} /> - + <Breadcrumb categoryId={categoryId} shortDesc={shortDesc} /> {!_.isEmpty(router.query) && ( - <ProductSearch query={query} categories ={categoryId} prefixUrl={`/shop/category/${slug}`} /> + <ProductSearch + query={query} + categories={categoryId} + prefixUrl={`/shop/category/${slug}`} + /> )} </BasicLayout> ); |