hamid zarghami
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import ContactCtaSection from "@/app/home/components/ContactCtaSection";
|
|
import { useState, type FC } from "react";
|
|
import { PRODUCT_GALLERY_IMAGES, PRODUCT_TITLE, QUANTITY_TIERS, type QuantityTier } from "../constants";
|
|
import ProductBreadcrumb from "./ProductBreadcrumb";
|
|
import ProductGallery from "./ProductGallery";
|
|
import ProductOrderActions from "./ProductOrderActions";
|
|
import ProductPurchaseOptions from "./ProductPurchaseOptions";
|
|
import ProductRelated from "./ProductRelated";
|
|
import ProductTabs from "./ProductTabs";
|
|
|
|
const ProductDetail: FC = () => {
|
|
const [selectedTier, setSelectedTier] = useState<QuantityTier>(QUANTITY_TIERS[0]);
|
|
|
|
return (
|
|
<>
|
|
<ProductBreadcrumb />
|
|
|
|
<div className="pb-28 lg:pb-0">
|
|
<div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
|
|
<div className="flex flex-col items-start gap-6 sm:gap-8 lg:flex-row lg:items-start lg:gap-10">
|
|
<ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} />
|
|
<div className="flex w-full min-w-0 flex-1 flex-col">
|
|
<ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
|
|
<ProductOrderActions selectedTier={selectedTier} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ProductTabs />
|
|
<ProductRelated />
|
|
<ContactCtaSection />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProductDetail;
|