| import { AnimatePresence, motion } from "framer-motion"; |
| import { Activity, Brain, Cpu, Database, Globe2, Layers, Radio, Shield, Sparkles, X } from "lucide-react"; |
| import { useState } from "react"; |
| import { toast } from "@/hooks/use-toast"; |
| import { cn } from "@/lib/utils"; |
|
|
| interface ModuleDrawerProps { |
| open: boolean; |
| onClose: () => void; |
| } |
|
|
| const CATEGORIES = ["Core", "Intelligence", "Network", "Ops"] as const; |
|
|
| interface Module { |
| id: string; |
| name: string; |
| category: typeof CATEGORIES[number]; |
| icon: typeof Activity; |
| desc: string; |
| status: "online" | "idle" | "syncing"; |
| } |
|
|
| const MODULES: Module[] = [ |
| { id: "cortex", name: "Cortex", category: "Intelligence", icon: Brain, desc: "Reasoning + planning core", status: "online" }, |
| { id: "synapse", name: "Synapse", category: "Intelligence", icon: Sparkles, desc: "Memory & retrieval graph", status: "online" }, |
| { id: "compute", name: "Compute", category: "Core", icon: Cpu, desc: "Scheduler & GPU pool", status: "idle" }, |
| { id: "vault", name: "Vault", category: "Core", icon: Database, desc: "Encrypted state store", status: "online" }, |
| { id: "mesh", name: "Mesh", category: "Network", icon: Globe2, desc: "Edge orchestration", status: "syncing" }, |
| { id: "relay", name: "Relay", category: "Network", icon: Radio, desc: "Live signal channel", status: "online" }, |
| { id: "shield", name: "Shield", category: "Ops", icon: Shield, desc: "Policy & access guard", status: "online" }, |
| { id: "pulse", name: "Pulse", category: "Ops", icon: Activity, desc: "Realtime telemetry", status: "online" }, |
| { id: "layers", name: "Layers", category: "Ops", icon: Layers, desc: "Deployment matrix", status: "idle" }, |
| ]; |
|
|
| export function ModuleDrawer({ open, onClose }: ModuleDrawerProps) { |
| const [active, setActive] = useState<typeof CATEGORIES[number] | "All">("All"); |
| const list = active === "All" ? MODULES : MODULES.filter(m => m.category === active); |
|
|
| return ( |
| <AnimatePresence> |
| {open && ( |
| <> |
| <motion.div |
| initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} |
| className="fixed inset-0 z-40 bg-background/40 backdrop-blur-sm" onClick={onClose} |
| /> |
| <motion.aside |
| initial={{ x: "100%" }} animate={{ x: 0 }} exit={{ x: "100%" }} |
| transition={{ type: "spring", stiffness: 220, damping: 28 }} |
| className="fixed top-0 right-0 bottom-0 z-50 w-[min(420px,92vw)] glass-strong border-l border-white/5 p-5 flex flex-col" |
| > |
| <div className="flex items-center justify-between mb-5"> |
| <div> |
| <h2 className="text-lg font-semibold tracking-tight">Modules</h2> |
| <p className="text-xs text-muted-foreground">Operating system surface</p> |
| </div> |
| <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="w-5 h-5" /></button> |
| </div> |
| |
| <div className="flex gap-1 mb-4 overflow-x-auto"> |
| {(["All", ...CATEGORIES] as const).map(c => ( |
| <button |
| key={c} |
| onClick={() => setActive(c)} |
| className={cn( |
| "px-3 py-1.5 rounded-full text-xs whitespace-nowrap transition-all duration-300 ease-cinematic", |
| active === c ? "bg-primary/20 text-primary border border-primary/40" : "text-muted-foreground hover:text-foreground border border-transparent" |
| )} |
| >{c}</button> |
| ))} |
| </div> |
| |
| <div className="flex-1 overflow-y-auto -mr-2 pr-2 grid grid-cols-1 sm:grid-cols-2 gap-3 content-start"> |
| {list.map((m, i) => ( |
| <motion.button |
| key={m.id} |
| layout |
| initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} |
| transition={{ delay: i * 0.03 }} |
| onClick={() => { |
| toast({ title: `${m.name} launched`, description: m.desc }); |
| }} |
| className="group text-left p-4 rounded-2xl glass hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 ease-cinematic" |
| > |
| <div className="flex items-start justify-between mb-3"> |
| <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/30 to-accent/30 grid place-items-center group-hover:scale-110 transition-transform"> |
| <m.icon className="w-4 h-4 text-primary" /> |
| </div> |
| <StatusDot status={m.status} /> |
| </div> |
| <div className="text-sm font-medium">{m.name}</div> |
| <div className="text-xs text-muted-foreground mt-0.5 leading-snug">{m.desc}</div> |
| </motion.button> |
| ))} |
| </div> |
| </motion.aside> |
| </> |
| )} |
| </AnimatePresence> |
| ); |
| } |
|
|
| function StatusDot({ status }: { status: Module["status"] }) { |
| const color = status === "online" ? "bg-emerald-400" : status === "syncing" ? "bg-amber-400" : "bg-muted-foreground/40"; |
| return ( |
| <span className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-muted-foreground"> |
| <span className={cn("w-1.5 h-1.5 rounded-full", color, status !== "idle" && "animate-pulse")} /> |
| {status} |
| </span> |
| ); |
| } |
|
|
