CartItem

cartitem-1779393693033.tsx

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

export default function CartItem({
  name = 'Pro Subscription',
  price = 29,
  emoji = '⭐',
}) {
  const [qty, setQty] = useState(1)
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: '14px',
      background: '#fff', borderRadius: '12px', padding: '14px 16px',
      boxShadow: '0 2px 10px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        width: '54px', height: '54px', borderRadius: '10px',
        background: '#f0f4ff', display: 'flex', alignItems: 'center',
        justifyContent: 'center', fontSize: '24px', flexShrink: 0,
      }}>{emoji}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: '#1e293b', fontSize: '14px' }}>{name}</div>
        <div style={{ color: '#64748b', fontSize: '13px', marginTop: '2px' }}>${price}/mo</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <button onClick={() => setQty(q => Math.max(1, q - 1))} style={{
          width: '28px', height: '28px', borderRadius: '6px', border: '1px solid #e2e8f0',
          background: '#f8fafc', cursor: 'pointer', fontWeight: 700,
        }}>−</button>
        <span style={{ fontWeight: 700, minWidth: '16px', textAlign: 'center', fontSize: '15px' }}>{qty}</span>
        <button onClick={() => setQty(q => q + 1)} style={{
          width: '28px', height: '28px', borderRadius: '6px', border: '1px solid #e2e8f0',
          background: '#f8fafc', cursor: 'pointer', fontWeight: 700,
        }}>+</button>
      </div>
      <div style={{ fontWeight: 700, color: '#1e293b', minWidth: '60px', textAlign: 'right' }}>${price * qty}</div>
    </div>
  )
}

Component info

CategoryE-commerce

Frameworkreact

TierFREE

Copies0

About

Shopping cart item row with quantity controls and remove button

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