Upload src/components/TopBar.tsx with huggingface_hub

src/components/TopBar.tsx

@@ -0,0 +1,64 @@
+import { KeyRound, CheckCircle2, XCircle, Menu } from "lucide-react";
+import { useApiKey } from "../context/ApiKeyContext";
+import { Link } from "react-router-dom";
+
+export default function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
+  const { apiKeys, activeKeyId, setActiveKeyId, activeKey } = useApiKey();
+
+  return (
+    <header className="h-16 border-b border-white/5 bg-zinc-950/40 backdrop-blur-xl flex items-center justify-between px-4 md:px-6 shrink-0 relative z-20 shadow-[0_4px_24px_-4px_rgba(6,10,12,0.65)]">
+      <div className="flex items-center gap-4">
+        {onMenuClick && (
+          <button 
+            onClick={onMenuClick}
+            className="p-2 -ml-2 text-zinc-400 hover:text-zinc-200 md:hidden"
+            aria-label="Open menu"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 md:gap-4">
+        <div className="flex items-center gap-2 hidden sm:flex">
+          {activeKey ? (
+            <div className="flex items-center gap-1.5 text-[11px] font-medium text-emerald-300 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
+              <CheckCircle2 className="w-3.5 h-3.5" />
+              API Connected
+            </div>
+          ) : (
+            <div className="flex items-center gap-1.5 text-[11px] font-medium text-rose-300 bg-rose-500/10 border border-rose-500/20 px-2.5 py-1 rounded-full shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
+              <XCircle className="w-3.5 h-3.5" />
+              API Key Missing
+            </div>
+          )}
+        </div>
+
+        <div className="h-5 w-px bg-white/10" />
+
+        <div className="flex items-center gap-3">
+          <div className="w-6 h-6 rounded-full bg-white/5 border border-white/10 flex items-center justify-center shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)]">
+            <KeyRound className="w-3.5 h-3.5 text-zinc-400" />
+          </div>
+          <select
+            value={activeKeyId || ""}
+            onChange={(e) => setActiveKeyId(e.target.value)}
+            className="bg-white/5 border border-white/10 rounded-md py-1.5 pl-3 pr-8 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 w-32 md:w-48 shadow-[inset_0_1px_1px_rgba(246,248,242,0.05)] transition-all hover:bg-white/10"
+          >
+            <option value="" disabled className="bg-zinc-900">Select API Key...</option>
+            {apiKeys.map((key) => (
+              <option key={key.id} value={key.id} className="bg-zinc-900">
+                {key.name}
+              </option>
+            ))}
+          </select>
+          {apiKeys.length === 0 && (
+            <Link to="/settings" className="text-xs text-indigo-400 hover:text-indigo-300 font-medium">
+              Add Key
+            </Link>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}