const App = () => { const product = { name: "Nike Pegasus 41 shoes", category: "Sports", price: 189, offerPrice: 159, rating: 4, images: [ "https://raw.githubusercontent.com/prebuiltui/prebuiltui/main/assets/card/productImage.png", "https://raw.githubusercontent.com/prebuiltui/prebuiltui/main/assets/card/productImage2.png", "https://raw.githubusercontent.com/prebuiltui/prebuiltui/main/assets/card/productImage3.png", "https://raw.githubusercontent.com/prebuiltui/prebuiltui/main/assets/card/productImage4.png" ], description: [ "High-quality material", "Comfortable for everyday use", "Available in different sizes" ] }; const [thumbnail, setThumbnail] = React.useState(product.images[0]); return product && (

Home / Products / {product.category} / {product.name}

{product.images.map((image, index) => (

setThumbnail(image)} className="border max-w-24 border-gray-500/30 rounded overflow-hidden cursor-pointer" > {`Thumbnail

))}

{product.name}

{Array(5).fill('').map((_, i) => ( product.rating > i ? ( ) : ( ) ))}

({product.rating})

MRP: ${product.price}

MRP: ${product.offerPrice}

(inclusive of all taxes)

About Product

{desc}

); };