"use client"; import React, { useMemo } from "react"; import { motion } from "framer-motion"; import { Activity, TrendingUp, TrendingDown, Zap, Globe, Database, ArrowUpRight } from "lucide-react"; interface SparklineProps { data: number[]; color: string; id: string; } const MiniSparkline = ({ data, color, id }: SparklineProps) => { const width = 160; const height = 48; const padding = 4; const points = useMemo(() => { const min = Math.min(...data); const max = Math.max(...data); const range = max - min; return data.map((val, i) => ({ x: (i / (data.length - 1)) * (width - padding * 2) + padding, y: height - ((val - min) / range) * (height - padding * 2) - padding })); }, [data]); const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" "); const areaPath = `${linePath} L ${width - padding} ${height} L ${padding} ${height} Z`; return (

); }; const metrics = [ { id: "flux-01", label: "Compute Velocity", value: "84.2", unit: "GHz", trend: "+12.4%", up: true, data: [35, 42, 38, 55, 48, 62, 70, 65, 84], color: "#22d3ee", icon: Zap }, { id: "flux-02", label: "Node Replication", value: "1.24", unit: "ms", trend: "-2.1%", up: true, data: [80, 75, 78, 70, 65, 68, 60, 55, 52], color: "#818cf8", icon: Globe }, { id: "flux-03", label: "Memory Ingress", value: "428", unit: "GB/s", trend: "+5.7%", up: false, data: [20, 35, 30, 45, 40, 55, 50, 65, 60], color: "#f472b6", icon: Database } ]; export default function PulseHorizonMetrics() { return (

{metrics.map((m, i) => (

{m.id}

{m.label}

{m.trend} {m.up ? : }

{m.value} {m.unit}

Real-time Stream

))}

); }