init

thirdeye/dashboard/app/knowledge-base/RightPanelTabs.tsx

@@ -0,0 +1,45 @@
+"use client";
+import React, { useState } from "react";
+import EntityPanel from "./EntityPanel";
+import KnowledgeBrowser from "./KnowledgeBrowser";
+
+type Tab = "entity" | "browser";
+
+export default function RightPanelTabs() {
+  const [active, setActive] = useState<Tab>("browser");
+
+  return (
+    <div className="w-full flex flex-col gap-0">
+      {/* Tab switcher */}
+      <div className="flex items-center gap-1 mb-3 p-1 rounded-xl bg-[#0C0814]/80 border border-[#A78BFA]/10 backdrop-blur-sm">
+        <button
+          onClick={() => setActive("browser")}
+          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[9px] font-mono font-bold uppercase tracking-[0.15em] transition-all duration-200"
+          style={{
+            backgroundColor: active === "browser" ? "rgba(167,139,250,0.18)" : "transparent",
+            color: active === "browser" ? "#E9D9FF" : "#6B7280",
+            border: active === "browser" ? "1px solid rgba(167,139,250,0.25)" : "1px solid transparent",
+          }}
+        >
+          <span className="material-symbols-outlined text-[13px]">library_books</span>
+          Knowledge
+        </button>
+        <button
+          onClick={() => setActive("entity")}
+          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[9px] font-mono font-bold uppercase tracking-[0.15em] transition-all duration-200"
+          style={{
+            backgroundColor: active === "entity" ? "rgba(167,139,250,0.18)" : "transparent",
+            color: active === "entity" ? "#E9D9FF" : "#6B7280",
+            border: active === "entity" ? "1px solid rgba(167,139,250,0.25)" : "1px solid transparent",
+          }}
+        >
+          <span className="material-symbols-outlined text-[13px]">manage_search</span>
+          Query
+        </button>
+      </div>
+
+      {/* Panel content */}
+      {active === "browser" ? <KnowledgeBrowser /> : <EntityPanel />}
+    </div>
+  );
+}