178 lines
12 KiB
TypeScript
178 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Save, Bell, Shield, Database, Cpu, Settings, MessageSquare, Sliders, HardDrive, Trash2 } from 'lucide-react';
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
show: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1,
|
|
}
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
|
show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring" as const, stiffness: 300, damping: 24 } }
|
|
};
|
|
|
|
export default function SettingsPage() {
|
|
return (
|
|
<div className="container mx-auto px-6 py-12 relative">
|
|
<div className="absolute top-[20%] left-[-10%] w-[30%] h-[30%] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none -z-10" />
|
|
<div className="absolute bottom-[10%] right-[10%] w-[30%] h-[30%] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none -z-10" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-4"
|
|
>
|
|
<div>
|
|
<h1 className="text-5xl font-black tracking-tight mb-3 flex items-center gap-4 drop-shadow-sm">
|
|
System Config <motion.div animate={{ rotate: 360 }} transition={{ duration: 10, repeat: Infinity, ease: "linear" }}><Settings className="w-10 h-10 text-primary drop-shadow-md" /></motion.div>
|
|
</h1>
|
|
<p className="text-muted-foreground text-xl font-medium">Adjust core parameters, AI models, and notification routing.</p>
|
|
</div>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05, boxShadow: "0 0 25px rgba(139, 92, 246, 0.4)" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="flex items-center gap-3 px-8 py-4 bg-primary text-primary-foreground rounded-2xl font-black shadow-lg transition-all relative overflow-hidden group"
|
|
>
|
|
<span className="absolute inset-0 bg-white/20 translate-y-[100%] group-hover:translate-y-[0%] transition-transform duration-300" />
|
|
<Save className="w-5 h-5 relative z-10" />
|
|
<span className="relative z-10">Save Changes</span>
|
|
</motion.button>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="show"
|
|
className="grid md:grid-cols-3 gap-8"
|
|
>
|
|
<div className="md:col-span-2 space-y-8">
|
|
{/* AI Settings */}
|
|
<motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-blue-500/30 transition-colors">
|
|
<div className="absolute -right-20 -top-20 w-48 h-48 bg-blue-500/10 rounded-full blur-[60px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
|
|
<h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
|
|
<div className="p-3 bg-blue-500/10 rounded-2xl border border-blue-500/20 shadow-inner"><Cpu className="w-8 h-8 text-blue-500" /></div>
|
|
AI Engine Preferences
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
|
|
<div>
|
|
<label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">Primary Provider</label>
|
|
<div className="relative">
|
|
<select className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all appearance-none shadow-inner cursor-pointer hover:bg-secondary/80">
|
|
<option>Anthropic (Claude 3.5 Sonnet)</option>
|
|
<option>OpenAI (GPT-4o)</option>
|
|
<option>Groq (Llama 3 70B)</option>
|
|
<option>Ollama (Local)</option>
|
|
</select>
|
|
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">▼</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">Strictness Level</label>
|
|
<div className="relative">
|
|
<select className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all appearance-none shadow-inner cursor-pointer hover:bg-secondary/80">
|
|
<option>High (Miss deals, zero noise)</option>
|
|
<option selected>Balanced</option>
|
|
<option>Low (Catch everything, more noise)</option>
|
|
</select>
|
|
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">▼</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1 md:col-span-2">
|
|
<label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">API Key</label>
|
|
<input type="password" value="sk-ant-api03-*************************" className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all shadow-inner" readOnly/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Alert Routing */}
|
|
<motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-amber-500/30 transition-colors">
|
|
<div className="absolute -left-20 -bottom-20 w-48 h-48 bg-amber-500/10 rounded-full blur-[60px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
|
|
<h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
|
|
<div className="p-3 bg-amber-500/10 rounded-2xl border border-amber-500/20 shadow-inner"><Bell className="w-8 h-8 text-amber-500" /></div>
|
|
Alert Routing
|
|
</h2>
|
|
<div className="space-y-4 relative z-10">
|
|
<motion.div whileHover={{ scale: 1.01 }} className="flex items-center justify-between p-6 bg-secondary/40 border border-white/5 rounded-3xl hover:border-amber-500/50 transition-all cursor-pointer shadow-sm">
|
|
<div className="flex items-center gap-5">
|
|
<div className="p-4 bg-[#0088cc]/10 rounded-2xl border border-[#0088cc]/20"><MessageSquare className="w-8 h-8 text-[#0088cc]" /></div>
|
|
<div>
|
|
<div className="font-black text-xl">Telegram Bot</div>
|
|
<div className="text-base font-bold text-green-500 mt-1 flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> Connected (@BidWraithBot)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-16 h-8 bg-amber-500 rounded-full relative shadow-[0_0_15px_rgba(245,158,11,0.4)]">
|
|
<motion.div layout className="absolute right-1 top-1 w-6 h-6 bg-white rounded-full shadow-md"></motion.div>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div whileHover={{ scale: 1.01 }} className="flex items-center justify-between p-6 bg-secondary/40 border border-white/5 rounded-3xl hover:border-border/80 transition-all cursor-pointer shadow-sm opacity-70">
|
|
<div className="flex items-center gap-5">
|
|
<div className="p-4 bg-[#5865F2]/10 rounded-2xl border border-[#5865F2]/20"><MessageSquare className="w-8 h-8 text-[#5865F2]" /></div>
|
|
<div>
|
|
<div className="font-black text-xl">Discord Webhook</div>
|
|
<div className="text-base font-bold text-muted-foreground mt-1">Not Configured</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-16 h-8 bg-secondary-foreground/20 rounded-full relative shadow-inner">
|
|
<motion.div layout className="absolute left-1 top-1 w-6 h-6 bg-card rounded-full shadow-sm"></motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{/* Stealth Mode */}
|
|
<motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-purple-500/30 transition-colors">
|
|
<div className="absolute -right-10 -bottom-10 w-40 h-40 bg-purple-500/10 rounded-full blur-[50px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
|
|
<h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
|
|
<div className="p-3 bg-purple-500/10 rounded-2xl border border-purple-500/20 shadow-inner"><Shield className="w-8 h-8 text-purple-500" /></div>
|
|
Stealth Mode
|
|
</h2>
|
|
<div className="space-y-8 relative z-10">
|
|
<div>
|
|
<label className="block text-sm font-black text-muted-foreground mb-4 uppercase tracking-wider">Humanization Level</label>
|
|
<input type="range" min="1" max="100" defaultValue="75" className="w-full accent-purple-500 h-3 bg-secondary/80 rounded-full appearance-none cursor-pointer shadow-inner" />
|
|
<div className="flex justify-between text-sm font-bold text-muted-foreground mt-4">
|
|
<span className="bg-secondary px-3 py-1 rounded-lg">Fast / Bot</span>
|
|
<span className="bg-secondary px-3 py-1 rounded-lg text-purple-500">Slow / Human</span>
|
|
</div>
|
|
</div>
|
|
<div className="pt-2">
|
|
<label className="flex items-center justify-between p-5 bg-secondary/40 border border-white/5 rounded-2xl hover:bg-secondary/60 transition-colors cursor-pointer group">
|
|
<span className="text-lg font-black group-hover:text-purple-500 transition-colors">Use Proxy Rotation</span>
|
|
<input type="checkbox" defaultChecked className="w-6 h-6 accent-purple-500 rounded text-purple-500 focus:ring-purple-500 bg-card border-white/10" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Data Management */}
|
|
<motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-red-500/30 transition-colors">
|
|
<h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
|
|
<div className="p-3 bg-red-500/10 rounded-2xl border border-red-500/20 shadow-inner"><HardDrive className="w-8 h-8 text-red-500" /></div>
|
|
Data Management
|
|
</h2>
|
|
<div className="space-y-4 relative z-10">
|
|
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="w-full py-4 bg-secondary/60 hover:bg-secondary border border-white/5 hover:border-red-500/50 text-lg font-black rounded-2xl transition-all flex items-center justify-center gap-3 text-foreground">
|
|
<Database className="w-5 h-5 text-red-500" /> Export Database
|
|
</motion.button>
|
|
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="w-full py-4 bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-lg font-black rounded-2xl transition-all flex items-center justify-center gap-3 text-red-500">
|
|
<Trash2 className="w-5 h-5" /> Purge Old Logs
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|