Spaces:
Paused
Paused
File size: 6,065 Bytes
5a81b95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | import { useState } from 'react';
import { ShoppingCart, Truck, Package, Star, AlertTriangle } from 'lucide-react';
export const MiniCart = () => (
<div className="h-full flex flex-col">
<div className="flex items-center justify-between mb-2">
<ShoppingCart className="w-4 h-4 text-primary" />
<span className="text-[8px] bg-accent text-accent-foreground px-1 rounded">3</span>
</div>
{[1, 2, 3].map(i => (
<div key={i} className="flex items-center gap-2 mb-1">
<div className="w-4 h-4 bg-secondary rounded" />
<div className="flex-1 h-2 bg-secondary/50 rounded" />
<span className="text-[7px] text-primary">$99</span>
</div>
))}
<div className="mt-auto pt-1 border-t border-border/30 flex justify-between text-[8px]">
<span className="text-muted-foreground">Total:</span>
<span className="text-primary font-mono">$297</span>
</div>
</div>
);
export const MiniCountdown = () => {
const [time] = useState({ d: 12, h: 5, m: 34, s: 22 });
return (
<div className="h-full flex items-center justify-center gap-2">
{Object.entries(time).map(([unit, val]) => (
<div key={unit} className="text-center">
<div className="text-lg font-mono text-primary bg-secondary/30 rounded px-1">
{String(val).padStart(2, '0')}
</div>
<div className="text-[6px] text-muted-foreground uppercase">{unit}</div>
</div>
))}
</div>
);
};
export const MiniCryptoTicker = () => (
<div className="h-full flex flex-col justify-center gap-1">
{[
{ symbol: 'BTC', price: '43,250', change: '+2.4%', up: true },
{ symbol: 'ETH', price: '2,280', change: '-0.8%', up: false },
{ symbol: 'SOL', price: '98.50', change: '+5.2%', up: true },
].map(({ symbol, price, change, up }) => (
<div key={symbol} className="flex items-center justify-between text-[8px]">
<span className="font-mono text-foreground">{symbol}</span>
<span className="font-mono text-primary">${price}</span>
<span className={up ? 'text-green-400' : 'text-red-400'}>{change}</span>
</div>
))}
</div>
);
export const MiniOrderStatus = () => (
<div className="h-full flex items-center justify-between px-1">
{['Ordered', 'Packed', 'Shipped', 'Delivered'].map((s, i) => (
<div key={s} className="flex flex-col items-center gap-1">
<div className={`w-5 h-5 rounded-full flex items-center justify-center text-[7px] ${i < 2 ? 'bg-green-500 text-white' : i === 2 ? 'bg-yellow-500 text-black' : 'bg-secondary text-muted-foreground'}`}>
{i < 2 ? '✓' : i === 2 ? <Truck className="w-3 h-3" /> : '○'}
</div>
<span className="text-[5px] text-muted-foreground">{s}</span>
</div>
))}
</div>
);
export const MiniProductCard = () => (
<div className="h-full flex gap-2">
<div className="w-12 h-12 bg-secondary/50 rounded flex items-center justify-center">
<Package className="w-6 h-6 text-muted-foreground" />
</div>
<div className="flex-1 flex flex-col justify-center">
<span className="text-[9px] font-medium truncate">Product Name</span>
<span className="text-[8px] text-muted-foreground">SKU: PRD-001</span>
<div className="flex items-center gap-2 mt-1">
<span className="text-[10px] text-primary font-mono">$49.99</span>
<span className="text-[7px] text-green-400">In Stock</span>
</div>
</div>
</div>
);
export const MiniSalesFunnel = () => (
<div className="h-full flex flex-col justify-center gap-0.5">
{[
{ label: 'Visitors', value: '10,000', width: '100%' },
{ label: 'Added to Cart', value: '2,500', width: '70%' },
{ label: 'Checkout', value: '800', width: '45%' },
{ label: 'Purchased', value: '320', width: '25%' },
].map((stage, i) => (
<div key={stage.label} className="flex items-center gap-2">
<div className="h-2 bg-gradient-to-r from-primary to-accent rounded-r" style={{ width: stage.width }} />
<span className="text-[6px] text-muted-foreground whitespace-nowrap">{stage.value}</span>
</div>
))}
</div>
);
export const MiniReviewScore = () => (
<div className="h-full flex flex-col items-center justify-center gap-1">
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map(i => (
<Star key={i} className={`w-3 h-3 ${i <= 4 ? 'text-yellow-400 fill-yellow-400' : 'text-muted-foreground'}`} />
))}
</div>
<span className="text-sm font-mono text-primary">4.2</span>
<span className="text-[7px] text-muted-foreground">1,247 reviews</span>
</div>
);
export const MiniInventoryAlert = () => (
<div className="h-full flex flex-col gap-1">
<div className="flex items-center gap-1 text-[8px]">
<AlertTriangle className="w-3 h-3 text-yellow-400" />
<span className="text-yellow-400">Low Stock Alert</span>
</div>
{[
{ name: 'Widget A', qty: 5 },
{ name: 'Gadget B', qty: 12 },
].map(item => (
<div key={item.name} className="flex items-center justify-between text-[7px] bg-secondary/20 rounded px-1.5 py-0.5">
<span className="text-muted-foreground">{item.name}</span>
<span className="text-red-400 font-mono">{item.qty} left</span>
</div>
))}
</div>
);
export const MiniConversionRate = () => (
<div className="h-full flex flex-col items-center justify-center gap-1">
<div className="relative w-14 h-14">
<svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
<circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--secondary))" strokeWidth="3" />
<circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--primary))" strokeWidth="3" strokeDasharray="32 68" />
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center">
<span className="text-sm font-mono text-primary">3.2%</span>
</div>
</div>
<span className="text-[7px] text-muted-foreground">Conversion Rate</span>
</div>
);
|