22 lines
1.1 KiB
TypeScript
22 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Moon, Search, Sun } from "lucide-react";
|
|
import { Button } from "@/components/ui/Button";
|
|
|
|
export function Topbar({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) {
|
|
return (
|
|
<header className="flex items-center justify-between border-b border-forest/10 bg-cream/70 px-5 py-4 backdrop-blur dark:border-white/10 dark:bg-[#08130f]/80">
|
|
<div>
|
|
<p className="text-sm font-bold uppercase tracking-wide text-forest dark:text-mint">Aartha web app</p>
|
|
<h1 className="font-display text-3xl text-ink dark:text-paper">Money command center</h1>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden items-center gap-2 rounded-lg bg-white/80 px-3 py-2 text-sm text-ink/50 ring-1 ring-forest/10 dark:bg-white/10 dark:text-paper/50 dark:ring-white/10 md:flex">
|
|
<Search size={16} /> Search accounts, transactions, budgets
|
|
</div>
|
|
<Button variant="secondary" onClick={onToggleDark} aria-label="Toggle dark mode">{dark ? <Sun size={17} /> : <Moon size={17} />}</Button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|