"use client"; import React, { useState } from "react"; import { Box, Button, Card, IconButton, Stack, ToggleButton, ToggleButtonGroup, Typography, } from "@mui/material"; import { FavoriteBorder, Favorite, Check } from "@mui/icons-material"; interface ProductCard2Props { productName?: string; productModel?: string; price?: number; sizes?: string[]; colors?: { name: string; value: string }[]; imageUrl?: string; onFavorite?: (favorited: boolean) => void; onAddToCart?: (selectedSize: string, selectedColor: string) => void; } export default function ProductCard2({ productName = "React Running", productModel = "Shoe 2", price = 120, sizes = ["9", "9.5", "10", "10.5", "11"], colors = [ { name: "Black colorway", value: "#1a1a1a" }, { name: "Light colorway", value: "#e5e5e5" }, { name: "Clay colorway", value: "#8B7355" }, { name: "Cream colorway", value: "#F5F5DC" }, ], imageUrl = "https://placehold.co/280x200", onFavorite, onAddToCart, }: ProductCard2Props) { const [selectedSize, setSelectedSize] = useState(""); const [selectedColor, setSelectedColor] = useState( colors[0]?.value || "" ); const [isFavorited, setIsFavorited] = useState(false); const [isLoading, setIsLoading] = useState(false); const handleSizeChange = ( _event: React.MouseEvent, newSize: string ) => { if (newSize !== null) { setSelectedSize(newSize); } }; const handleColorChange = (colorValue: string) => { setSelectedColor(colorValue); }; const handleFavoriteToggle = () => { const newFavoriteState = !isFavorited; setIsFavorited(newFavoriteState); onFavorite?.(newFavoriteState); }; const handleAddToCart = async () => { if (!selectedSize) return; setIsLoading(true); try { const selectedColorName = colors.find((c) => c.value === selectedColor)?.name || ""; onAddToCart?.(selectedSize, selectedColorName); } finally { setIsLoading(false); } }; return ( ({ maxWidth: 360, mx: "auto", borderRadius: 3, overflow: "hidden", boxShadow: theme.shadows[8], ...theme.applyStyles("dark", { bgcolor: "grey.900", }), })} > {isFavorited ? ( ) : ( )} {/* Product details */} {/* Product title */} {productName} ({ bgcolor: "grey.200", color: "text.secondary", px: 1, py: 0.5, borderRadius: 1, fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5, ...theme.applyStyles("dark", { bgcolor: "grey.800", }), })} > {productModel} {/* Color variants */} {colors.map((color) => ( handleColorChange(color.value)} sx={(theme) => ({ width: 32, height: 32, color: `${color.value} !important`, bgcolor: `${color.value} !important`, border: selectedColor === color.value ? 2 : 1, borderColor: selectedColor === color.value ? "primary.main" : "divider", borderRadius: "50%", "&:hover": { transform: "scale(1.1)", }, ...theme.applyStyles("dark", { borderColor: selectedColor === color.value ? "primary.light" : "grey.600", }), })} > {selectedColor === color.value && ( )} ))} {/* Size selection */} Size {sizes.map((size) => ( {size} ))} {/* Price and add to cart */} Price ${price} ); }

Ecommerce

Product Card

Product Card 2