70 lines
4.1 KiB
TypeScript
70 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ExternalLink, Clock, Brain } from 'lucide-react';
|
|
|
|
const mockListings = [
|
|
{ id: 1, title: 'Lenovo ThinkPad T14 Gen 3 AMD Ryzen 7', price: '$450.00', estValue: '$800.00', site: 'eBay US', time: '14m 30s', verdict: 'HIGH_OPPORTUNITY' },
|
|
{ id: 2, title: 'NVIDIA RTX 3080 Founders Edition', price: '$320.00', estValue: '$450.00', site: 'HiBid', time: '1h 12m', verdict: 'GOOD_DEAL' },
|
|
{ id: 3, title: 'Lot of 10x iPhone 12 Pro 128GB Unlocked', price: '$1200.00', estValue: '$2500.00', site: 'ShopGoodwill', time: '4h 05m', verdict: 'RESELLER_DREAM' },
|
|
{ id: 4, title: 'Sony A7IV Mirrorless Camera Body', price: '$1500.00', estValue: '$1900.00', site: 'eBay UK', time: '5m 10s', verdict: 'URGENT' },
|
|
];
|
|
|
|
export default function ListingsPage() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold font-mono tracking-tight mb-2">ACTIVE_<span className="text-primary">LISTINGS</span></h1>
|
|
<p className="text-muted-foreground">Filtered lots currently matching your target criteria.</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button className="px-4 py-2 bg-card border border-border rounded font-mono text-sm hover:border-primary transition-colors">Export CSV</button>
|
|
<button className="px-4 py-2 bg-primary text-primary-foreground rounded font-mono text-sm font-bold shadow-[0_0_10px_rgba(0,255,136,0.3)]">Force Refresh</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
{mockListings.map((lot, i) => (
|
|
<motion.div
|
|
key={lot.id}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="flex flex-col md:flex-row gap-4 p-4 bg-card border border-border hover:border-primary/50 transition-colors rounded-lg group"
|
|
>
|
|
<div className="w-full md:w-48 h-32 bg-background rounded border border-border flex items-center justify-center text-muted-foreground font-mono text-xs overflow-hidden relative">
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
[IMAGE_DATA]
|
|
</div>
|
|
<div className="flex-1 flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h3 className="font-bold text-lg leading-tight group-hover:text-primary transition-colors">{lot.title}</h3>
|
|
<div className={`px-2 py-1 text-xs font-mono rounded ${lot.verdict === 'URGENT' ? 'bg-destructive/20 text-destructive border border-destructive/30' : 'bg-primary/10 text-primary border border-primary/30'}`}>
|
|
{lot.verdict}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm font-mono text-muted-foreground mb-4">
|
|
<span className="flex items-center gap-1"><ExternalLink className="w-3 h-3" /> {lot.site}</span>
|
|
<span className="flex items-center gap-1 text-accent"><Clock className="w-3 h-3" /> {lot.time}</span>
|
|
<span className="flex items-center gap-1"><Brain className="w-3 h-3 text-primary" /> Verified</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between items-end">
|
|
<div>
|
|
<div className="text-2xl font-bold font-mono">{lot.price}</div>
|
|
<div className="text-xs font-mono text-muted-foreground">Est. Value: <span className="line-through">{lot.estValue}</span></div>
|
|
</div>
|
|
<button className="px-6 py-2 bg-background border border-border hover:border-primary hover:text-primary rounded font-mono text-sm transition-all group-hover:shadow-[0_0_15px_rgba(0,255,136,0.1)]">
|
|
ANALYZE LOT
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|