91 lines
4.6 KiB
TypeScript
91 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ShieldCheck, ShieldAlert, Cpu, Terminal } 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-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">NETWORK_<span className="text-primary">NODES</span></h1>
|
|
<p className="text-muted-foreground">Manage auction platforms targeted by the scraping engine.</p>
|
|
</div>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-card border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-all rounded font-mono text-sm shadow-[0_0_15px_rgba(0,255,136,0.1)]">
|
|
<Terminal className="w-4 h-4" /> ADAPT_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, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className={`p-6 rounded-lg border ${site.status === 'healthy' ? 'bg-card border-border' : 'bg-card border-accent/50'}`}
|
|
>
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h3 className="font-bold text-lg">{site.name}</h3>
|
|
<div className="text-xs font-mono text-muted-foreground">{site.url}</div>
|
|
</div>
|
|
{site.status === 'healthy' ? (
|
|
<ShieldCheck className="w-6 h-6 text-primary" />
|
|
) : (
|
|
<ShieldAlert className="w-6 h-6 text-accent animate-pulse" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3 font-mono text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Latency:</span>
|
|
<span className={site.status === 'healthy' ? 'text-foreground' : 'text-accent'}>{site.lag}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Last Ping:</span>
|
|
<span>{site.lastScrape}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Selectors:</span>
|
|
<span className="text-primary">Verified</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-4 border-t border-border flex gap-2">
|
|
<button className="flex-1 py-1.5 bg-background border border-border hover:border-primary/50 rounded text-xs transition-colors flex items-center justify-center gap-1">
|
|
<Cpu className="w-3 h-3" /> Inspect
|
|
</button>
|
|
<button className="flex-1 py-1.5 bg-background border border-border hover:border-destructive/50 rounded text-xs transition-colors text-muted-foreground hover:text-destructive">
|
|
Pause
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 p-6 bg-primary/5 border border-primary/20 rounded-lg">
|
|
<h3 className="font-mono text-primary mb-4 flex items-center gap-2">
|
|
<Cpu className="w-5 h-5" /> AUTO_ADAPTATION_ENGINE
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground max-w-3xl mb-4">
|
|
Ghost Node can autonomously learn new site structures. Provide a target URL, and the Scout Agent will attempt to generate valid CSS selectors for listings, prices, and countdown timers.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<input type="text" placeholder="https://example-auction.com" className="flex-1 bg-background border border-border rounded px-4 py-2 font-mono text-sm focus:outline-none focus:border-primary transition-colors" />
|
|
<button className="px-6 py-2 bg-primary text-primary-foreground font-bold font-mono rounded hover:bg-primary/90 transition-colors">
|
|
INITIATE_SCAN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|