| 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(0,0,0,0.5)]"> | |
| <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(255,255,255,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(255,255,255,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(255,255,255,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(255,255,255,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> | |
| ); | |
| } | |