"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Activity, ShieldAlert, Terminal, Cpu, ArrowUpRight, Wifi, Database } from "lucide-react"; /** * HyperMetricBento * High-density industrial dashboard aesthetic. * Focuses on raw data, sharp edges, and micro-grid patterns. */ const TechBorder = () => (

); const MetricCard = ({ title, value, unit, icon: Icon, gridClass, trend, color = "indigo" }: { title: string; value: string; unit: string; icon: any; gridClass: string; trend?: string; color?: "indigo" | "emerald" | "amber" | "rose"; }) => { const themes = { indigo: "text-indigo-500 bg-indigo-500/5 border-indigo-500/20", emerald: "text-emerald-500 bg-emerald-500/5 border-emerald-500/20", amber: "text-amber-500 bg-amber-500/5 border-amber-500/20", rose: "text-rose-500 bg-rose-500/5 border-rose-500/20", }; return (

{/* Background Micro-Grid */}

ID_NODE // {title.replace(/\s/g, '_')}

{title}

{value} {unit}

{[...Array(8)].map((_, i) => (

))}

{trend && {trend}}

{/* Hover Action */}

); }; export default function HyperMetricBento() { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* TOP ROW */}

{/* BOTTOM ROW */}

Terminal_STDOUT

{">"} connection_established: 10.0.0.1

{">"} mounting_secure_vault_registry...

{">"} decrypting_handshake_0x4f...

{">"} warning: latency_threshold_exceeded

); }