From 75910c5251a1618ae267334284c6377331d845f4 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 08:10:53 +0000 Subject: [PATCH] Update src/app/product/[id]/page.tsx --- src/app/product/[id]/page.tsx | 200 ++++++++++++---------------------- 1 file changed, 69 insertions(+), 131 deletions(-) diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx index d25539c..ee17b35 100644 --- a/src/app/product/[id]/page.tsx +++ b/src/app/product/[id]/page.tsx @@ -3,10 +3,9 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import FooterCard from "@/components/sections/footer/FooterCard"; -import { Instagram, Twitter, Youtube, Heart, Share2, ShoppingCart } from "lucide-react"; +import { Instagram, Twitter, Youtube, ShoppingCart, Heart } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; -import { useParams } from "next/navigation"; const TikTok = (props: React.SVGProps) => ( ) => ( ); -const products: Record< - string, - { - id: string; - name: string; - price: number; - imageSrc: string; - imageAlt: string; - description: string; - sizes: string[]; - colors: string[]; - specs: { label: string; value: string }[]; - } -> = { +const products: Record = { "1": { id: "1", name: "Classic Black Hoodie", price: 89.99, - imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", imageAlt: "Classic black oversized hoodie", description: - "Premium comfort meets timeless style with our Classic Black Hoodie. Crafted from 100% organic cotton, this essential piece features a relaxed fit perfect for everyday wear. The durable construction ensures it'll be a staple in your wardrobe for years to come.", sizes: ["XS", "S", "M", "L", "XL", "XXL"], - colors: ["Black", "Gray", "Navy"], - specs: [ - { label: "Material", value: "100% Organic Cotton" }, - { label: "Weight", value: "280g" }, - { label: "Care", value: "Machine wash cold" }, - { label: "Fit", value: "Relaxed" }, - ], + description: "Experience the epitome of urban comfort with our Classic Black Hoodie. Crafted from premium heavyweight cotton blend, this essential piece offers a perfect balance of style and warmth. The oversized silhouette provides that coveted streetwear aesthetic, while premium stitching ensures durability. Whether you're hitting the streets or relaxing at home, this hoodie becomes an instant wardrobe staple.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-hoodie-indoors_23-2149359859.jpg", imageAlt: "Classic black oversized hoodie", sizes: ["XS", "S", "M", "L", "XL", "2XL"], + colors: ["Black", "Charcoal", "Navy"], + rating: 4.8, + reviews: 124, }, "2": { id: "2", name: "Vintage Denim Jacket", price: 129.99, - imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", imageAlt: "Vintage style denim jacket", description: - "Elevate your streetwear game with our Vintage Denim Jacket. Featuring authentic distressing and premium indigo denim, this jacket adds instant character to any outfit. Perfect for layering or wearing standalone.", sizes: ["XS", "S", "M", "L", "XL"], - colors: ["Indigo", "Light Blue", "Black"], - specs: [ - { label: "Material", value: "100% Cotton Denim" }, - { label: "Weight", value: "650g" }, - { label: "Care", value: "Wash separately" }, - { label: "Fit", value: "Classic" }, - ], + description: "Step back in time with our Vintage Denim Jacket, an iconic piece that never goes out of style. This carefully distressed jacket combines classic denim craftsmanship with modern streetwear edge. Perfect for layering, it adds instant cool factor to any outfit. The slightly faded wash and strategic rips create that perfect worn-in vintage feel that can only come from quality construction and timeless design.", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-wearing-denim-jacket_23-2148859621.jpg", imageAlt: "Vintage style denim jacket", sizes: ["XS", "S", "M", "L", "XL"], + colors: ["Indigo", "Light Wash", "Black Denim"], + rating: 4.9, + reviews: 89, }, }; -export default function ProductPage() { - const params = useParams(); - const productId = params.id as string; - const product = products[productId]; - - const [selectedSize, setSelectedSize] = useState(product?.sizes[2] || ""); - const [selectedColor, setSelectedColor] = useState(product?.colors[0] || ""); +export default function ProductPage({ params }: { params: { id: string } }) { + const product = products[params.id] || products["1"]; const [quantity, setQuantity] = useState(1); + const [selectedSize, setSelectedSize] = useState(product.sizes[2]); + const [selectedColor, setSelectedColor] = useState(product.colors[0]); const [isFavorited, setIsFavorited] = useState(false); const navItems = [ @@ -86,48 +59,6 @@ export default function ProductPage() { { icon: Youtube, href: "https://youtube.com/@umbra", ariaLabel: "YouTube" }, ]; - if (!product) { - return ( - - - -
-
-

Product Not Found

- - Return to Shop - -
-
- - - - ); - } - return ( -
+
← Back to Shop -
-
+
+ {/* Product Image */} +
{product.imageAlt}
-
-

{product.name}

-

- ${product.price.toFixed(2)} -

-

{product.description}

+ {/* Product Info */} +
+
+

{product.name}

+
+
+ {[...Array(5)].map((_, i) => ( + ★ + ))} +
+ {product.rating} ({product.reviews} reviews) +
+

${product.price.toFixed(2)}

+
-
- -
- {product.sizes.map((size) => ( +

{product.description}

+ + {/* Size Selection */} +
+ +
+ {product.sizes.map((size: string) => (
-
- -
- {product.colors.map((color) => ( + {/* Color Selection */} +
+ +
+ {product.colors.map((color: string) => (
-
- -
+ {/* Quantity Selection */} +
+ +
- {quantity} + {quantity}
-
- -
-
-

Product Details

-
- {product.specs.map((spec, idx) => ( -
- {spec.label}: - {spec.value} -
- ))} -
+ {/* Product Details */} +
+

✓ Free shipping on orders over $150

+

✓ 30-day return policy

+

✓ Secure checkout with multiple payment options

-- 2.49.1