File size: 2,974 Bytes
7bd9022 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 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>
);
}
|