init

thirdeye/dashboard/app/logs/LogAnalytics.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function LogAnalytics() {
+  const metrics = [
+    { title: "Ingestion Rate", icon: "trending_up", iconColor: "#A78BFA", value: "1.2", unit: "GB/s" },
+    { title: "Active Agents", icon: "groups", iconColor: "#00daf3", value: "242" },
+    { title: "Threat Level", icon: "warning", iconColor: "#ef4444", value: "CRITICAL", sub: "3 ONGOING BREACHES" },
+    { title: "Memory Usage", icon: "memory", iconColor: "#E9D9FF", value: "84", unit: "%" },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 gap-4 animate-fade-in-scale">
+      {metrics.map((m, idx) => (
+        <div key={idx} className="bg-[#0C0814]/80 border border-[#A78BFA]/10 rounded-2xl p-5 flex flex-col justify-between h-28 card-interactive relative overflow-hidden group hover:border-[#A78BFA]/30 hover:bg-[#110D1A] transition-colors shadow-lg">
+          <div className="flex justify-between items-center relative z-10 w-full">
+            <span className="text-[10px] text-[#8B7BB1] tracking-[0.15em] uppercase font-bold">{m.title}</span>
+            <span className="material-symbols-outlined text-[20px]" style={{ color: m.iconColor }}>{m.icon}</span>
+          </div>
+          <div className="relative z-10 flex flex-col items-start justify-end flex-1 mt-2">
+             <div className="flex items-baseline gap-1.5">
+               <span className="text-[28px] font-black text-white tracking-tight" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+                 {m.value}
+               </span>
+               {m.unit && <span className="text-[12px] font-bold tracking-wide" style={{ color: m.iconColor }}>{m.unit}</span>}
+             </div>
+             {m.sub && <span className="text-[8.5px] font-mono-data text-[#8B7BB1]/80 uppercase tracking-[0.1em] mt-0.5">{m.sub}</span>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}