update

src/components/product/ProductDetail/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import type { ProductDetailData } from '@/types';
+import { productDetailData } from '@/data/product/detail';
+import { findProductDetailBySlug } from '@/lib/product/productdetail';
+import { ErrorLink } from '@components/common/error';
+
+import { Breadcrumb } from '@components/common/Breadcrumb';
+import { ImageProduct } from './ImageProduct';
+
+interface ProductDetailPageProps {
+  slug: string;
+}
+
+const ProductDetailPage: React.FC<ProductDetailPageProps> = ({ slug }) => {
+  const productDetails = productDetailData as unknown as ProductDetailData[];
+  const Products = findProductDetailBySlug(slug, productDetails);
+
+  const breadcrumbItems = Products?.product_info?.productPath?.[0]?.path.map((item) => ({
+    name: item.name,
+    url: item.url,
+  })) ?? [{ name: 'Trang chủ', url: '/' }];
+
+  // Trường hợp không tìm thấy chi tiết sản phẩm
+  // Không tìm thấy chi tiết sản phẩm
+  if (!Products) {
+    return <ErrorLink />;
+  }
+
+  return (
+    <>
+      <div className="container">
+        <Breadcrumb items={breadcrumbItems} />
+      </div>
+      <section className="page-product-detail mt-2 bg-white">
+        <div className="container">
+          <div className="box-content-product-detail flex justify-between gap-5">
+            <div className="box-left">
+              {/* image product */}
+              <ImageProduct ItemImage={Products.product_info.productImageGallery} />
+            </div>
+            <div className="box-right"></div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default ProductDetailPage;