"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Activity, ArrowUpRight, ChevronRight, ShieldCheck, Zap, AlertCircle, BarChart3 } from "lucide-react"; export default function CommandCenterStat() { const [data, setData] = useState(Array.from({ length: 20 }, () => Math.floor(Math.random() * 100))); const [status, setStatus] = useState<"optimal" | "warning">("optimal"); // Real-time data simulation for the "Command Center" feel useEffect(() => { const interval = setInterval(() => { setData((prev) => [...prev.slice(1), Math.floor(Math.random() * 100)]); // Randomly trigger a warning status for visual variety if (Math.random() > 0.8) setStatus(prev => prev === "optimal" ? "warning" : "optimal"); }, 2000); return () => clearInterval(interval); }, []); return (

{/* --- GRID & GLOW BACKGROUND (z-0) --- */}

{/* HEADER SECTION: Status Bar & Title */}

Command Center

Global Performance Node

System {status}

{/* MAIN STATS: Giant Number & Real-time Mini Chart */}

+28.4%

94.2k

Total processed operations / hour

{/* REAL-TIME SPARKLINE (Viscous SVG Path) */}

{data.map((val, i) => ( ))}

{/* ALERTS & MODULES SECTION */}

Security Protocol Encrypted V3

Active Nodes 128 Clusters

Latency 14ms Average

{/* ACTION FOOTER */}

{[1, 2, 3].map((i) => (

))}

Node operators online

Full Report

{/* --- BOTTOM GLOW BAR --- */}

); }