From 854858f5aba982b7403f58574a76285f2942afa1 Mon Sep 17 00:00:00 2001 From: jyswee Date: Thu, 23 Jul 2026 22:09:20 +0000 Subject: [PATCH] Seed: ecommerce template (24 files) --- src/pages/ProductDetail.tsx | 307 ++++++++++++++++++++++++++++++++++++ 1 file changed, 307 insertions(+) create mode 100644 src/pages/ProductDetail.tsx diff --git a/src/pages/ProductDetail.tsx b/src/pages/ProductDetail.tsx new file mode 100644 index 0000000..0192616 --- /dev/null +++ b/src/pages/ProductDetail.tsx @@ -0,0 +1,307 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; +import { Separator } from "@/components/ui/separator"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { + Star, Heart, Minus, Plus, ChevronRight, Truck, RotateCcw, ShieldCheck, ShoppingBag, Flame, ZoomIn +} from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { useCart } from "@/lib/cart-context"; + +const thumbnails = [ + "from-rose-100 to-stone-200", + "from-stone-100 to-rose-100", + "from-amber-100 to-stone-100", + "from-stone-200 to-amber-100", +]; + +const colors = [ + { name: "Black", class: "bg-stone-900" }, + { name: "Cognac", class: "bg-amber-700" }, + { name: "Rose", class: "bg-rose-400" }, + { name: "Stone", class: "bg-stone-400" }, +]; + +const sizes = ["XS", "S", "M", "L", "XL", "XXL"]; + +const reviews = [ + { name: "Sarah M.", date: "2 weeks ago", rating: 5, text: "Absolutely stunning quality. The leather is soft yet durable and the fit is perfect. Worth every penny!", avatar: "SM" }, + { name: "James K.", date: "1 month ago", rating: 4, text: "Great jacket overall. Runs slightly large so consider sizing down. The color is rich and beautiful.", avatar: "JK" }, + { name: "Emily R.", date: "1 month ago", rating: 5, text: "This is my third purchase from StyleHaus and they never disappoint. The craftsmanship is exceptional.", avatar: "ER" }, +]; + +const relatedProducts = [ + { id: 10, name: "Satin Blouse", price: 89, gradient: "from-rose-50 to-rose-100", rating: 4 }, + { id: 11, name: "Tailored Wool Coat", price: 385, gradient: "from-stone-200 to-stone-400", rating: 5 }, + { id: 7, name: "Organic Cotton Tee", price: 45, gradient: "from-rose-100 to-rose-200", rating: 4 }, + { id: 8, name: "Velvet Midi Skirt", price: 115, gradient: "from-stone-300 to-stone-100", rating: 5 }, +]; + +export default function ProductDetailPage() { + const [selectedImage, setSelectedImage] = useState(0); + const [selectedColor, setSelectedColor] = useState("Black"); + const [selectedSize, setSelectedSize] = useState("M"); + const [quantity, setQuantity] = useState(1); + const [wishlisted, setWishlisted] = useState(false); + const { addItem } = useCart(); + + const renderStars = (count: number) => + Array.from({ length: 5 }, (_, i) => ( + + )); + + const handleAddToCart = () => { + addItem({ + id: "leather-jacket-1", + name: "Classic Leather Jacket", + price: 189, + quantity, + size: selectedSize, + color: selectedColor, + image: "", + }); + toast.success("Added to cart!"); + }; + + return ( +
+
+ +
+ {/* Breadcrumb */} + + + {/* Product Layout */} +
+ {/* Left:Images */} +
+ + +
+
+
+
+ Product Image +
+ +
+
+ + +
+
+
+
+ Product Image +
+ +
+
+ {thumbnails.map((grad, i) => ( +
+
+ + {/* Right:Details */} +
+
+ Best Seller +

Classic Leather Jacket

+
+
{renderStars(5)}
+ (128 reviews) +
+
+ +
+ $189 + $249 + -24% +
+ +

Timeless silhouette crafted from premium full-grain leather. Features a tailored fit with minimal hardware for a clean, modern aesthetic.

+ + + + {/* Color Selector */} +
+

Color: {selectedColor}

+
+ {colors.map((c) => ( +
+
+ + {/* Size Selector */} +
+
+

Size

+ +
+
+ {sizes.map((s) => ( + + ))} +
+
+ + {/* Scarcity Signal */} +
Selling Fast:Only 5 left in stock
+ + {/* Quantity + Add to Cart */} +
+
+ + {quantity} + +
+ + +
+ + {/* Trust */} +
+ {[ + { icon: Truck, text: "Free Shipping" }, + { icon: RotateCcw, text: "Easy Returns" }, + { icon: ShieldCheck, text: "Secure Payment" }, + ].map((item) => ( +
+ + {item.text} +
+ ))} +
+
+
+ + {/* Tabs */} + + + Description + Reviews (128) + Shipping Info + + +

Our Classic Leather Jacket is the cornerstone of any wardrobe. Made from hand-selected full-grain leather that develops a beautiful patina over time, this jacket is designed to be your companion for years to come. The tailored fit flatters every body type while allowing comfortable layering.

+
    +
  • Premium full-grain leather construction
    • +
  • YKK zippers with custom pulls
    • +
  • Interior and exterior pockets
    • +
  • Fully lined with satin finish
    • +
  • Available in 4 colors
    • +
+ + +
+
4.8
+
+
{[...Array(5)].map((_, i) => )}
+

Based on 128 reviews

+
+
+ {reviews.map((review, i) => ( +
+
{review.avatar}
+
+
+

{review.name}

+ Verified Purchase + {review.date} +
+
{renderStars(review.rating)}
+

{review.text}

+
+
+ ))} + + + +
+
+ +
+

Free Standard Shipping

+

On all orders over $100. Delivery in 5-7 business days.

+
+
+
+ +
+

30-Day Returns

+

Not satisfied? Return within 30 days for a full refund.

+
+
+
+ + + + {/* You Might Also Like */} +
+

You Might Also Like

+
+ {relatedProducts.map((product) => ( + + +
+
+
+
+ Image +
+ +

{product.name}

+
{renderStars(product.rating)}
+

\${product.price}

+ + + + ))} +
+
+
+ +
+ ); +}