"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Zap, Target, TrendingUp, ChevronRight, ShieldCheck, MousePointer2 } from "lucide-react"; interface GaugeProps { value: number; size?: number; strokeWidth?: number; color?: string; } const RadialGauge = ({ value, size = 200, strokeWidth = 16, color = "#6366f1" }: GaugeProps) => { const radius = (size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const offset = circumference - (value / 100) * circumference; return (

{value}%

); }; export default function InteractiveRadialGaugeCard() { const [currentValue, setCurrentValue] = useState(78); return (

{/* Lado Izquierdo: El Gauge */}

50 ? "#6366f1" : "#f43f5e"} /> {/* Botones de interacción rápida (Simulados para el usuario) */}

{[45, 78, 100].map((v) => ( ))}

{/* Lado Derecho: Contenido e Insights */}

System Efficiency

Core Performance Index

Your current processing throughput is operating at optimal levels across all active cloud instances.

Target

95.0%

Growth

+12.4%

Analyze Full Report

{/* Decoraciones de fondo dinámicas */}

); }