init

thirdeye/dashboard/app/components/TopBar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { checkHealth } from "../lib/api";
+
+export default function TopBar() {
+  const [healthy, setHealthy] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    checkHealth().then(setHealthy);
+    const interval = setInterval(() => checkHealth().then(setHealthy), 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header
+      className="h-20 flex justify-between items-center px-10 w-full border-b z-40 sticky top-0"
+      style={{ backgroundColor: "rgba(12,12,14,0.8)", backdropFilter: "blur(24px)" }}
+    >
+      {/* Search */}
+      <div className="flex items-center gap-6">
+        <div className="relative">
+          <span
+            className="material-symbols-outlined absolute left-0 top-1/2 -translate-y-1/2 text-zinc-600"
+            style={{ fontSize: "18px" }}
+          >
+            search
+          </span>
+          <input
+            type="text"
+            placeholder="Query the system..."
+            className="bg-transparent border-none text-[13px] focus:outline-none rounded py-2 pl-8 pr-4 w-72 placeholder:text-zinc-700 text-zinc-200 transition-all"
+          />
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center gap-8">
+        <div className="flex items-center gap-6 text-zinc-500">
+          <span
+            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
+            style={{ fontSize: "22px" }}
+          >
+            notifications
+          </span>
+          <span
+            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
+            style={{ fontSize: "22px" }}
+          >
+            terminal
+          </span>
+        </div>
+
+        <div className="h-6 w-px" style={{ backgroundColor: "rgba(255,255,255,0.05)" }} />
+
+        {/* Health indicator */}
+        <div
+          className="text-[10px] font-bold px-4 py-1.5 rounded-full tracking-wide flex items-center gap-2"
+          style={{
+            color: healthy === false ? "#ff6f78" : "#A78BFA",
+            backgroundColor: healthy === false ? "rgba(255,111,120,0.05)" : "rgba(167,139,250,0.05)",
+            border: `1px solid ${healthy === false ? "rgba(255,111,120,0.2)" : "rgba(167,139,250,0.2)"}`,
+          }}
+        >
+          <span
+            className="w-1.5 h-1.5 rounded-full"
+            style={{
+              backgroundColor: healthy === null ? "#A78BFA" : healthy ? "#10b981" : "#ff6f78",
+              display: "inline-block",
+              boxShadow: healthy ? "0 0 6px #10b981" : undefined,
+            }}
+          />
+          {healthy === null
+            ? "CONNECTING..."
+            : healthy
+            ? "THIRDEYE_CORE: ONLINE"
+            : "BACKEND: OFFLINE"}
+        </div>
+      </div>
+    </header>
+  );
+}