46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { NavLink } from "react-router";
|
|
import { Music, Sun, Moon } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { cn } from "~/lib/utils";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
export function BottomNav() {
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<nav className="border-t bg-background shrink-0">
|
|
<div className="max-w-lg mx-auto flex items-center">
|
|
<NavLink
|
|
to="/"
|
|
end
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"flex flex-col items-center gap-0.5 flex-1 py-2 text-xs transition-colors",
|
|
isActive
|
|
? "text-primary"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)
|
|
}
|
|
>
|
|
<Music className="w-5 h-5" />
|
|
<span>Library</span>
|
|
</NavLink>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="mr-2 text-muted-foreground hover:text-foreground"
|
|
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
|
|
aria-label="Toggle theme"
|
|
>
|
|
{resolvedTheme === "dark" ? (
|
|
<Sun className="w-5 h-5" />
|
|
) : (
|
|
<Moon className="w-5 h-5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|