1 files changed, 54 insertions, 25 deletions

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
index f41859a9..ba53aca4 100644
--- a/src-migrate/modules/product-detail/components/Breadcrumb.tsx
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -1,41 +1,70 @@
-import React, { Fragment } from 'react'
-import { useQuery } from 'react-query'
-import { getProductCategoryBreadcrumb } from '~/services/product'
-import Link from 'next/link'
-import { createSlug } from '~/libs/slug'
+import React, { Fragment } from 'react';
+import { useQuery } from 'react-query';
+import { getProductCategoryBreadcrumb } from '~/services/product';
+import Link from 'next/link';
+import { createSlug } from '~/libs/slug';
 
 type Props = {
-  id: number,
-  name: string
-}
+  id: number;
+  name: string;
+};
+
+const MAX_VISIBLE_CATEGORIES = 2; // tampilkan 2 level terakhir
 
 const Breadcrumb = ({ id, name }: Props) => {
-  const query = useQuery({
-    queryKey: ['product-category-breadcrumb'],
+  const { data: breadcrumbs = [] } = useQuery({
+    queryKey: ['product-category-breadcrumb', id], // penting: ikutkan id
     queryFn: () => getProductCategoryBreadcrumb(id),
-    refetchOnWindowFocus: false
-  })
+    refetchOnWindowFocus: false,
+  });
 
-  const breadcrumbs = query.data || []
+  const total = breadcrumbs.length;
+  const showEllipsis = total > MAX_VISIBLE_CATEGORIES;
+  const visible = showEllipsis
+    ? breadcrumbs.slice(total - MAX_VISIBLE_CATEGORIES)
+    : breadcrumbs;
+  const hiddenText = showEllipsis
+    ? breadcrumbs
+        .slice(0, total - MAX_VISIBLE_CATEGORIES)
+        .map((c) => c.name)
+        .join(' / ')
+    : '';
 
   return (
-    <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
-      <Link href='/' className='text-danger-500'>Home</Link>
-      <span className='mx-2'>/</span>
-      {breadcrumbs.map((category, index) => (
-        <Fragment key={index}>
+    <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
+      <Link href='/' className='text-danger-500 shrink-0'>
+        Home
+      </Link>
+      <span className='mx-2 shrink-0'>/</span>
+
+      {showEllipsis && (
+        <>
+          <span className='text-danger-500 shrink-0' title={hiddenText}>
+            …
+          </span>
+          <span className='mx-2 shrink-0'>/</span>
+        </>
+      )}
+
+      {visible.map((category, index) => (
+        <Fragment key={category.id ?? index}>
           <Link
-            href={createSlug('/shop/category/', category.name, category.id.toString())}
-            className='text-danger-500'
+            href={createSlug(
+              '/shop/category/',
+              category.name,
+              String(category.id)
+            )}
+            className='text-danger-500 shrink-0'
           >
             {category.name}
           </Link>
-          <span className='mx-2'>/</span>
+          <span className='mx-2 shrink-0'>/</span>
         </Fragment>
       ))}
-      <span>{name}</span>
+
+      <span className='truncate min-w-0 flex-1'>{name}</span>
     </div>
-  )
-}
+  );
+};
 
-export default Breadcrumb
\ No newline at end of file
+export default Breadcrumb;