init

thirdeye/dashboard/app/components/MetricTiles.tsx

@@ -0,0 +1,62 @@
+const metrics = [
+  {
+    label: "Active Agents",
+    icon: "sensors",
+    value: "14",
+    sub: "+2 Synced",
+    subColor: "text-[#A78BFA]",
+    subIcon: "trending_up",
+  },
+  {
+    label: "Signals Processed",
+    icon: "data_exploration",
+    value: "8.4k",
+    sub: "Last 24h Cycle",
+    subColor: "text-zinc-400",
+    subIcon: null,
+  },
+  {
+    label: "Open Insights",
+    icon: "lightbulb",
+    value: "23",
+    sub: "4 Critical Priority",
+    subColor: "text-[#A78BFA] font-semibold uppercase tracking-tighter",
+    subIcon: null,
+  },
+  {
+    label: "Avg Latency",
+    icon: "timer",
+    value: "184ms",
+    sub: "Optimal Range",
+    subColor: "text-zinc-400 uppercase tracking-tighter",
+    subIcon: null,
+  },
+];
+
+export default function MetricTiles() {
+  return (
+      <div className="grid grid-cols-4 gap-6 animate-fade-in-up">
+        {metrics.map((metric, index) => (
+          <div key={index} className={`glass p-6 rounded-2xl border flex flex-col justify-between relative overflow-hidden group card-interactive cursor-pointer`} style={{ borderColor: 'rgba(255, 255, 255, 0.05)', animationDelay: `${index * 100}ms` }}>
+          <div className="flex justify-between items-start mb-4">
+            <span className="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">
+              {metric.label}
+            </span>
+            <span className="material-symbols-outlined" style={{ fontSize: "18px", color: "rgba(167,139,250,0.6)" }}>
+              {metric.icon}
+            </span>
+          </div>
+          <div className="text-3xl font-semibold text-white">{metric.value}</div>
+          <div className={`text-[11px] mt-3 flex items-center gap-1.5 font-medium ${metric.subColor}`}>
+            {metric.subIcon && (
+              <span className="material-symbols-outlined" style={{ fontSize: "11px" }}>
+                {metric.subIcon}
+              </span>
+            )}
+            <span>{metric.sub}</span>
+          </div>
+        </div>
+      ))}
+      </div>
+  );
+}