From ca3ae0db6e8e3f2cf99423797c60f5c2cc66a780 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 29 May 2025 20:57:31 +0530 Subject: feat: added the product page and enhanced the UI - added the product page where the product details is shown - enhanced the nav bar to handle the rendering - added the loading screen to the page - fixed the rendering method to the navigation-menu --- frontend/src/components/product-page.tsx | 567 +++++++++++++++++++++++++++++++ 1 file changed, 567 insertions(+) create mode 100644 frontend/src/components/product-page.tsx (limited to 'frontend/src/components/product-page.tsx') diff --git a/frontend/src/components/product-page.tsx b/frontend/src/components/product-page.tsx new file mode 100644 index 0000000..aff9d53 --- /dev/null +++ b/frontend/src/components/product-page.tsx @@ -0,0 +1,567 @@ +"use client"; + +import { useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Separator } from "@/components/ui/separator"; +import { + Heart, + Share2, + ShoppingBag, + Star, + Truck, + RefreshCw, + Shield, + Ruler, + ChevronLeft, + ChevronRight, + Minus, + Plus, + Check, +} from "lucide-react"; + +interface ProductPageProps { + productId?: string; +} + +export function ProductPage({ productId = "1" }: ProductPageProps) { + const [selectedImage, setSelectedImage] = useState(0); + const [selectedSize, setSelectedSize] = useState(""); + const [selectedColor, setSelectedColor] = useState(""); + const [quantity, setQuantity] = useState(1); + const [isWishlisted, setIsWishlisted] = useState(false); + + // Mock product data - in real app, this would come from an API + const product = { + id: productId, + name: "Oversized Cotton Hoodie", + brand: "blcklst", + price: 89, + originalPrice: 129, + rating: 4.5, + reviewCount: 234, + description: "A premium oversized cotton hoodie crafted for ultimate comfort and style. Made from 100% organic cotton with a soft fleece lining, this hoodie features a relaxed fit perfect for layering or wearing solo.", + features: [ + "100% organic cotton construction", + "Soft fleece interior lining", + "Kangaroo pocket with hidden phone compartment", + "Reinforced double-stitched seams", + "Pre-shrunk for lasting fit", + "Unisex design" + ], + images: [ + "/api/placeholder/600/800", + "/api/placeholder/600/800", + "/api/placeholder/600/800", + "/api/placeholder/600/800", + ], + colors: [ + { name: "Black", value: "#000000", available: true }, + { name: "White", value: "#FFFFFF", available: true }, + { name: "Gray", value: "#6B7280", available: true }, + { name: "Navy", value: "#1E3A8A", available: false }, + ], + sizes: [ + { name: "XS", available: true }, + { name: "S", available: true }, + { name: "M", available: true }, + { name: "L", available: true }, + { name: "XL", available: true }, + { name: "XXL", available: false }, + ], + inStock: true, + stockCount: 12, + }; + + const relatedProducts = [ + { + id: "2", + name: "Minimal T-Shirt", + price: 45, + originalPrice: 65, + image: "/api/placeholder/300/400", + rating: 4.3, + }, + { + id: "3", + name: "Denim Jacket", + price: 129, + originalPrice: 179, + image: "/api/placeholder/300/400", + rating: 4.7, + }, + { + id: "4", + name: "Cargo Pants", + price: 89, + originalPrice: 119, + image: "/api/placeholder/300/400", + rating: 4.2, + }, + { + id: "5", + name: "Sneakers", + price: 149, + originalPrice: 199, + image: "/api/placeholder/300/400", + rating: 4.6, + }, + ]; + + const reviews = [ + { + id: 1, + name: "Sarah M.", + rating: 5, + date: "2024-01-15", + comment: "Amazing quality! The fit is perfect and the material feels premium. Definitely worth the price.", + verified: true, + }, + { + id: 2, + name: "Alex K.", + rating: 4, + date: "2024-01-10", + comment: "Great hoodie, very comfortable. Only wish it came in more colors.", + verified: true, + }, + { + id: 3, + name: "Jordan L.", + rating: 5, + date: "2024-01-05", + comment: "Best hoodie I've ever owned. The oversized fit is exactly what I wanted.", + verified: true, + }, + ]; + + const nextImage = () => { + setSelectedImage((prev) => (prev + 1) % product.images.length); + }; + + const prevImage = () => { + setSelectedImage((prev) => (prev - 1 + product.images.length) % product.images.length); + }; + + const addToCart = () => { + if (!selectedSize || !selectedColor) { + alert("Please select size and color"); + return; + } + // Add to cart logic here + console.log("Added to cart:", { product, selectedSize, selectedColor, quantity }); + }; + + const renderStars = (rating: number) => { + return Array.from({ length: 5 }, (_, i) => ( + + )); + }; + + return ( +
+ {/* Breadcrumb */} +
+
+ +
+
+ +
+
+ {/* Product Images */} +
+ {/* Main Image */} +
+ {product.name} + {product.originalPrice && ( + + {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF + + )} + + {/* Navigation Arrows */} + + +
+ + {/* Thumbnail Images */} +
+ {product.images.map((image, index) => ( + + ))} +
+
+ + {/* Product Details */} +
+ {/* Header */} +
+

{product.brand}

+

{product.name}

+ + {/* Rating */} +
+
+ {renderStars(product.rating)} +
+ + {product.rating} ({product.reviewCount} reviews) + +
+ + {/* Price */} +
+ ${product.price} + {product.originalPrice && ( + + ${product.originalPrice} + + )} +
+
+ + {/* Color Selection */} +
+
+

Color

+ {selectedColor && ( + {selectedColor} + )} +
+
+ {product.colors.map((color) => ( + + ))} +
+
+ + {/* Size Selection */} +
+
+

Size

+ +
+
+ {product.sizes.map((size) => ( + + ))} +
+
+ + {/* Quantity */} +
+

Quantity

+
+
+ + {quantity} + +
+ + {product.stockCount} items left + +
+
+ + {/* Add to Cart */} +
+
+ + + +
+ + {/* Features */} +
+
+ + Free Shipping +
+
+ + Free Returns +
+
+ + 2 Year Warranty +
+
+
+
+
+ + {/* Product Details Tabs */} +
+ + + Description + Specifications + Reviews ({product.reviewCount}) + + + +
+

{product.description}

+

Features

+
    + {product.features.map((feature, index) => ( +
  • + + {feature} +
    • + ))} +
+
+ + + +
+
+

Material & Care

+
+
+ Material: + 100% Organic Cotton +
+
+ Weight: + 400 GSM +
+
+ Care: + Machine Wash Cold +
+
+ Origin: + Made in Portugal +
+
+
+
+

Sizing

+
+
+ Fit: + Oversized +
+
+ Model Height: + 6'0" / 183cm +
+
+ Model Size: + Size M +
+
+
+
+ + + +
+
+
+
+
+ {renderStars(product.rating)} +
+ {product.rating} + ({product.reviewCount} reviews) +
+

Based on verified purchases

+
+ +
+ + + +
+ {reviews.map((review) => ( +
+
+
+
+
+ {review.name} + {review.verified && ( + + Verified Purchase + + )} +
+
+
+ {renderStars(review.rating)} +
+ {review.date} +
+
+
+
+

{review.comment}

+ +
+ ))} +
+
+ + +
+ + {/* Related Products */} +
+

You might also like

+
+ {relatedProducts.map((item) => ( + +
+
+ {item.name} + {item.originalPrice && ( + + {Math.round(((item.originalPrice - item.price) / item.originalPrice) * 100)}% OFF + + )} +
+
+

+ {item.name} +

+
+ {renderStars(item.rating)} + ({item.rating}) +
+
+ ${item.price} + {item.originalPrice && ( + + ${item.originalPrice} + + )} +
+
+
+ + ))} +
+
+
+
+ ); +} \ No newline at end of file -- cgit v1.2.3-59-g8ed1b