52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
'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;
|