Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

1 files changed, 41 insertions, 0 deletions

diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
new file mode 100644
index 00000000..f41859a9
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -0,0 +1,41 @@
+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
+}
+
+const Breadcrumb = ({ id, name }: Props) => {
+  const query = useQuery({
+    queryKey: ['product-category-breadcrumb'],
+    queryFn: () => getProductCategoryBreadcrumb(id),
+    refetchOnWindowFocus: false
+  })
+
+  const breadcrumbs = query.data || []
+
+  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}>
+          <Link
+            href={createSlug('/shop/category/', category.name, category.id.toString())}
+            className='text-danger-500'
+          >
+            {category.name}
+          </Link>
+          <span className='mx-2'>/</span>
+        </Fragment>
+      ))}
+      <span>{name}</span>
+    </div>
+  )
+}
+
+export default Breadcrumb
\ No newline at end of file