Store Product Card
E-commerce product card with ratings, favorites, and quick-add functionality.
Preview
Sale
Vintage Camera
4.8(124)
$249.99$299.99
Usage
import { StoreProductCard } from "@/components/profile"
<StoreProductCard
title="Vintage Camera"
price="$249.99"
originalPrice="$299.99"
image="/product.jpg"
rating={4.8}
reviewCount={124}
badge="sale"
onFavorite={() => handleFavorite()}
onAddToCart={() => handleAddToCart()}
/>Examples
New
Wireless Headphones
4.5(89)
$179.99
Sale
Smart Watch
4.9(256)
$299.99$349.99
Designer Bag
4.7(45)
$450.00
Features
- Star ratings with review count
- Sale pricing with strikethrough original price
- Customizable badges (Sale, New, etc.)
- Favorite heart toggle
- Quick add-to-cart button
- Hover animations
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Product title |
| price | string | - | Formatted product price |
| originalPrice | string | - | Formatted original price (for sales) |
| image | string | - | Product image URL |
| rating | number | - | Rating (0-5) |
| reviewCount | number | - | Number of reviews |
| badge | "new" | "sale" | "bestseller" | "limited" | - | Optional product badge |
| isFavorite | boolean | false | Favorite state |
| onFavorite | () => void | - | Favorite toggle handler |
| onAddToCart | () => void | - | Add to cart handler |