init

thirdeye/dashboard/app/components/LiveSignals.tsx

@@ -0,0 +1,85 @@
+const signals = [
+  {
+    icon: "warning",
+    time: "T-2m ago",
+    message:
+      "Unusual spike in security mentions in DevOps channels. Analyzing 12 recent signals...",
+    tag: "Security Risk",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.3)",
+  },
+  {
+    icon: "check_circle",
+    time: "T-14m ago",
+    message:
+      "High consensus reached on Microservices architecture for project 'Aurora'. 95% alignment.",
+    tag: "Consensus Met",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "#A78BFA",
+  },
+  {
+    icon: "campaign",
+    time: "T-1h ago",
+    message:
+      "New 'ThirdEye Sovereign' feature mentioned across all leadership streams. Tracking adoption...",
+    tag: "Brand Sync",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.5)",
+  },
+  {
+    icon: "psychology_alt",
+    time: "T-2h ago",
+    message:
+      "Ongoing trend: Focus shift to AI-assisted development across 5 engineering squads.",
+    tag: "Trend Vector",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.7)",
+  },
+];
+
+export default function LiveSignals() {
+  return (
+    <section className="space-y-6">
+    <div>
+      <div className="flex items-center gap-3 mb-4 animate-fade-in-right delay-300">
+        <div className="w-2 h-2 rounded-full bg-[#A78BFA] shadow-[0_0_10px_#A78BFA] animate-pulse"></div>
+        <h3 className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">Live Signals Stream</h3>
+        <div className="ml-auto flex gap-2">
+          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">filter_list</span></button>
+          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">sort</span></button>
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-4 animate-fade-in-up delay-400">
+        {signals.map((s, idx) => (
+          <div key={idx} className="glass rounded-xl p-4 border border-white/5 hover:border-[#A78BFA]/30 hover:bg-white/5 transition-all group card-interactive flex flex-col justify-between min-h-[140px]" style={{ animationDelay: `${400 + idx * 100}ms` }}>
+            <div className="flex justify-between items-start mb-6">
+              <div
+                className="p-2.5 rounded-lg"
+                style={{ backgroundColor: "rgba(167,139,250,0.1)" }}
+              >
+                <span className="material-symbols-outlined" style={{ color: "#A78BFA", fontSize: "22px" }}>
+                  {s.icon}
+                </span>
+              </div>
+              <span className="text-[10px] text-zinc-400 uppercase tracking-tighter">{s.time}</span>
+            </div>
+
+            <p className="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">
+              {s.message}
+            </p>
+
+            <div className="mt-auto flex items-center justify-between">
+              <span className="text-[10px] font-bold uppercase tracking-[0.1em]" style={{ color: "#A78BFA" }}>
+                {s.tag}
+              </span>
+              <span className="material-symbols-outlined text-zinc-500 group-hover:text-[#A78BFA] transition-all cursor-pointer" style={{ fontSize: "22px" }}>
+                arrow_forward
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+    </section>
+  );
+}