Product Detail Page This component displays the full details of a product, including an image gallery, pricing, description, and seller information. It is designed to be highly reusable, with all content passed in via props.
// demo.tsx
import { ProductDetailPage, ProductDetailPageProps } from "@/components/ui/product-detail-page";
import { Tag, Ruler, Users, Info } from "lucide-react";
// Mock data to be passed into the component
const demoProps: ProductDetailPageProps = {
breadcrumbs: [
{ label: "Market", href: "#" },
{ label: "Clothing", href: "#" },
{ label: "Lightweight Brown Bomber Jacket", href: "#" },
],
product: {
name: "Lightweight Brown Bomber Jacket",
price: 70,
shippingCost: 5.60,
currency: "€",
images: [
"https://cdn.21st.dev/assets/mirror/eb/ebd000adfb789b3ed9ac53c3169252365c03abc8e73f029721252182c56fa5bc.jpg",
"https://cdn.21st.dev/assets/mirror/fc/fc6e560ff7f271b1bec59d5552d94fe37dfcfee410a5e3b0dc85ee73e24505d5.jpg",
"https://cdn.21st.dev/assets/mirror/c6/c6680b1a9b6bac5b55fc7662f048fb8c5fcf96f5d9c025122a86f4bf278ac157.jpg",
],
description: "A stylish light bomber jacket, perfect for the transitional seasons. Made from breathable, water-resistant material with a zip-up front, side pockets, and a sleeve zip pocket for small essentials. Ideal for layering in spring or fall.",
tags: [
{ label: "Brown", icon: Tag },
{ label: "L Size", icon: Ruler },
{ label: "Women", icon: Users },
{ label: "New", icon: Info },
],
},
seller: {
name: "Maria Johansson",
avatarUrl: "https://cdn.21st.dev/assets/mirror/d0/d066ce85ffca59255ef063ca3ebbcd4f31531ad3ea85bd54f59b79568d4c0fb3.jpg",
rating: 4.9,
},
};
// The demo component that renders the product page
const ProductPageDemo = () => {
// Data for the "You might also like" section
const relatedProducts = [
{ id: 1, src: "https://cdn.21st.dev/assets/mirror/b9/b91d9fb0af79f9d798778b443b0e21a2d568f4a535467ff44f0f2230cc101628.jpg", alt: "Similar Jacket" },
{ id: 2, src: "https://cdn.21st.dev/assets/mirror/a9/a9ef4cca489ec66ac09e0d6c0965c8921110fbfca693eeba789fcee3f1520142.jpg", alt: "Running Shoes" },
{ id: 3, src: "https://cdn.21st.dev/assets/mirror/52/52ce6c0662defdfc4475e2f19d48611f8f962f44c3bd44d5c11d706fd5689e68.jpg", alt: "Modern Watch" },
{ id: 4, src: "https://cdn.21st.dev/assets/mirror/d1/d194ec77b4e949839a73249ef95d2c674912c6ec5cafb212c8d7b6d00e918565.jpg", alt: "Stylish Sunglasses" },
];
return (
<div className="bg-muted/30">
{/* This container simulates the card-like appearance from the UI design */}
<div className="max-w-screen-xl mx-auto p-4 sm:p-6 md:p-8">
<div className="bg-card rounded-2xl shadow-sm">
<ProductDetailPage
product={demoProps.product}
seller={demoProps.seller}
breadcrumbs={demoProps.breadcrumbs}
/>
{/* "You might also like" section with real images */}
<div className="px-4 md:px-8 pb-8">
<h2 className="text-2xl font-bold tracking-tight">You might also like</h2>
<div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
{relatedProducts.map((item) => (
<div key={item.id} className="bg-muted/50 rounded-lg aspect-square overflow-hidden group">
<img
src={item.src}
alt={item.alt}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
};
export default ProductPageDemo;