107 lines
5.8 KiB
TypeScript
107 lines
5.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ShieldCheck, ShieldAlert, Cpu, Network, PauseCircle, PlayCircle, Plus } from 'lucide-react';
|
|
|
|
const mockSites = [
|
|
{ id: 1, name: 'eBay US', url: 'ebay.com', status: 'healthy', lag: '240ms', lastScrape: '2s ago' },
|
|
{ id: 2, name: 'eBay UK', url: 'ebay.co.uk', status: 'healthy', lag: '310ms', lastScrape: '5s ago' },
|
|
{ id: 3, name: 'HiBid', url: 'hibid.com', status: 'warning', lag: '1200ms', lastScrape: '1m ago' },
|
|
{ id: 4, name: 'ShopGoodwill', url: 'shopgoodwill.com', status: 'healthy', lag: '450ms', lastScrape: '12s ago' },
|
|
];
|
|
|
|
export default function SitesPage() {
|
|
return (
|
|
<div className="container mx-auto px-6 py-12">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
|
|
<div>
|
|
<h1 className="text-4xl font-extrabold tracking-tight mb-2 flex items-center gap-3">
|
|
Network Nodes <span className="text-primary"><Network className="w-8 h-8" /></span>
|
|
</h1>
|
|
<p className="text-muted-foreground text-lg">Manage and monitor the auction platforms your agents are scraping.</p>
|
|
</div>
|
|
<button className="flex items-center gap-2 px-6 py-3 bg-secondary hover:bg-secondary/80 border-2 border-border/50 text-foreground transition-all rounded-full font-bold shadow-sm hover:shadow-md hover:-translate-y-0.5">
|
|
<Plus className="w-5 h-5" /> Add New Site
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{mockSites.map((site, i) => (
|
|
<motion.div
|
|
key={site.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: i * 0.1, type: "spring" }}
|
|
className={`p-6 rounded-3xl border-2 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 ${site.status === 'healthy' ? 'bg-card border-border/50' : 'bg-amber-500/5 border-amber-500/30'}`}
|
|
>
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h3 className="font-bold text-xl mb-1">{site.name}</h3>
|
|
<div className="text-sm font-medium text-muted-foreground bg-secondary/50 px-2 py-0.5 rounded-md inline-block">{site.url}</div>
|
|
</div>
|
|
<div className={`p-2 rounded-xl ${site.status === 'healthy' ? 'bg-green-500/10' : 'bg-amber-500/10'}`}>
|
|
{site.status === 'healthy' ? (
|
|
<ShieldCheck className="w-6 h-6 text-green-500" />
|
|
) : (
|
|
<ShieldAlert className="w-6 h-6 text-amber-500 animate-pulse" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 font-medium text-sm">
|
|
<div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
|
|
<span className="text-muted-foreground">Latency</span>
|
|
<span className={`font-bold ${site.status === 'healthy' ? 'text-foreground' : 'text-amber-500'}`}>{site.lag}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
|
|
<span className="text-muted-foreground">Last Ping</span>
|
|
<span className="font-bold">{site.lastScrape}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center p-3 bg-secondary/30 rounded-xl">
|
|
<span className="text-muted-foreground">Selectors</span>
|
|
<span className="font-bold text-green-500">Verified</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-3">
|
|
<button className="flex-1 py-2.5 bg-secondary hover:bg-primary hover:text-primary-foreground rounded-xl text-sm font-bold transition-colors flex items-center justify-center gap-2">
|
|
<Cpu className="w-4 h-4" /> Inspect
|
|
</button>
|
|
<button className="p-2.5 bg-secondary hover:bg-amber-500/10 text-muted-foreground hover:text-amber-500 rounded-xl transition-colors flex items-center justify-center">
|
|
<PauseCircle className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4 }}
|
|
className="mt-12 p-8 bg-gradient-to-br from-primary/10 to-accent/5 border-2 border-primary/20 rounded-3xl"
|
|
>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-3 bg-primary/20 rounded-2xl">
|
|
<Cpu className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold">Auto-Adaptation Engine</h3>
|
|
</div>
|
|
<p className="text-lg text-muted-foreground max-w-3xl mb-6 font-medium">
|
|
The engine can autonomously learn new site structures. Provide a target URL, and the Scout Agent will attempt to generate valid selectors for listings, prices, and countdown timers.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="https://example-auction.com"
|
|
className="flex-1 bg-background/80 backdrop-blur-sm border-2 border-border/50 rounded-2xl px-6 py-4 text-lg focus:outline-none focus:border-primary transition-colors shadow-inner"
|
|
/>
|
|
<button className="px-8 py-4 bg-primary text-primary-foreground font-bold text-lg rounded-2xl hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/30 flex items-center justify-center gap-2 hover:-translate-y-0.5 active:translate-y-0">
|
|
<PlayCircle className="w-6 h-6" />
|
|
Initiate Scan
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |