ProductCard

productcard-1779393693020.tsx

'use client'
import { useState } from 'react'

export default function ProductCard({
  name = 'Wireless Headphones',
  price = 89.99,
  originalPrice = 129.99,
  rating = 4.5,
  reviews = 234,
  emoji = '🎧',
  badge = 'Sale',
}) {
  const [added, setAdded] = useState(false)
  const discount = Math.round((1 - price / originalPrice) * 100)
  return (
    <div style={{
      background: '#fff', borderRadius: '16px', overflow: 'hidden',
      boxShadow: '0 4px 20px rgba(0,0,0,0.08)', maxWidth: '260px',
    }}>
      <div style={{
        height: '180px', background: 'linear-gradient(135deg,#f0f4ff,#e8f0fe)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: '72px', position: 'relative',
      }}>
        {emoji}
        {badge && (
          <div style={{
            position: 'absolute', top: '12px', left: '12px',
            background: '#ef4444', color: '#fff', padding: '3px 10px',
            borderRadius: '6px', fontSize: '11px', fontWeight: 700,
          }}>{badge} -{discount}%</div>
        )}
      </div>
      <div style={{ padding: '16px' }}>
        <h3 style={{ margin: '0 0 6px', fontSize: '15px', fontWeight: 700, color: '#1e293b' }}>{name}</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '12px' }}>
          <span style={{ color: '#f59e0b' }}>★★★★☆</span>
          <span style={{ fontSize: '12px', color: '#94a3b8' }}>({reviews})</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontSize: '20px', fontWeight: 800, color: '#1e293b' }}>${price}</span>
            <span style={{ fontSize: '13px', color: '#94a3b8', textDecoration: 'line-through', marginLeft: '6px' }}>${originalPrice}</span>
          </div>
          <button
            onClick={() => setAdded(!added)}
            style={{
              background: added ? '#10b981' : '#6d28d9',
              color: '#fff', border: 'none', borderRadius: '8px',
              padding: '8px 14px', cursor: 'pointer', fontSize: '13px', fontWeight: 600,
              transition: 'background 0.2s',
            }}
          >{added ? '✓ Added' : '+ Cart'}</button>
        </div>
      </div>
    </div>
  )
}

Component info

CategoryE-commerce

Frameworkreact

TierFREE

Copies0

About

E-commerce product card with image, rating, price and add to cart

More from E-commerce

'use client'
const ITEMS = [
  { name:'Empire UI Pro', qty:1, price:29 },
  { name:'MCP Access', qty:1, price:9 },
  { name:'Priority Support', qty:1, price:5 },
]

export default function ReceiptCard({ items = ITEMS, tax = 0.1 }) {
  const subtotal

ReceiptCard

E-commerce

'use client'
import { useState } from 'react'

interface CartItem { id: number; name: string; price: number; qty: number; color: string }

const INITIAL_ITEMS: CartItem[] = [
  { id: 1, name: 'Empire UI Pro', price: 19, qty: 1, color: '#C9A84C' },

CartDrawer

E-commerce

'use client'
import { useState } from 'react'

const images = ['🖥️', '💻', '⌨️', '🖱️']
const colors = [{ name: 'Space Gray', hex: '#4a4a4a' }, { name: 'Silver', hex: '#c0c0c0' }, { name: 'Gold', hex: '#C9A84C' }]
const sizes = ['8GB / 256GB', '16GB

ProductQuickView

E-commerce

'use client';
import { useState } from 'react';

export default function SubscriptionManager() {
  const [current, setCurrent] = useState('pro');
  const [confirming, setConfirming] = useState(null);

  const plans = [
    { id: 'starter', name: 'Sta

SubscriptionManager

E-commerce