ReceiptCard

receiptcard-1779394026123.tsx

'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 = items.reduce((s, i) => s + i.price * i.qty, 0)
  const taxAmt = subtotal * tax
  const total = subtotal + taxAmt
  return (
    <div style={{ background:'#fff', borderRadius:'16px', padding:'24px', maxWidth:'320px', boxShadow:'0 4px 20px rgba(0,0,0,0.08)' }}>
      <div style={{ textAlign:'center', marginBottom:'20px' }}>
        <div style={{ fontSize:'32px', marginBottom:'8px' }}>🧾</div>
        <h3 style={{ margin:0, fontSize:'16px', fontWeight:700, color:'#1e293b' }}>Order Receipt</h3>
        <div style={{ fontSize:'12px', color:'#94a3b8', marginTop:'4px' }}>#{Math.random().toString(36).slice(2,8).toUpperCase()}</div>
      </div>
      <div style={{ borderTop:'1px dashed #e2e8f0', borderBottom:'1px dashed #e2e8f0', padding:'14px 0', marginBottom:'14px' }}>
        {items.map(item => (
          <div key={item.name} style={{ display:'flex', justifyContent:'space-between', marginBottom:'8px' }}>
            <span style={{ fontSize:'13px', color:'#374151' }}>{item.name} x{item.qty}</span>
            <span style={{ fontSize:'13px', fontWeight:600, color:'#1e293b' }}>${(item.price * item.qty).toFixed(2)}</span>
          </div>
        ))}
      </div>
      {[['Subtotal', subtotal], ['Tax (10%)', taxAmt]].map(([l,v]) => (
        <div key={l} style={{ display:'flex', justifyContent:'space-between', marginBottom:'6px' }}>
          <span style={{ fontSize:'13px', color:'#64748b' }}>{l}</span>
          <span style={{ fontSize:'13px', color:'#374151' }}>${v.toFixed(2)}</span>
        </div>
      ))}
      <div style={{ display:'flex', justifyContent:'space-between', padding:'12px 0', borderTop:'2px solid #e2e8f0', marginTop:'8px' }}>
        <span style={{ fontWeight:700, color:'#1e293b' }}>Total</span>
        <span style={{ fontWeight:900, fontSize:'18px', color:'#6d28d9' }}>${total.toFixed(2)}</span>
      </div>
      <button style={{
        width:'100%', padding:'11px', background:'linear-gradient(135deg,#6d28d9,#2563eb)',
        color:'#fff', border:'none', borderRadius:'10px', fontWeight:700, cursor:'pointer', fontSize:'14px', marginTop:'8px',
      }}>Download PDF</button>
    </div>
  )
}

Component info

CategoryE-commerce

Frameworkreact

TierFREE

Copies0

About

Order receipt card with itemized list, totals and download button

More from 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

'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: 'cent

CartItem

E-commerce