q3k
af1a4e6c74
Some checks failed
/ deploy (push) Failing after 1s
The language selection being a flag never sat right wight me:
1. Its positioning next to 'CEBULACAMP' implied more that it's a
cebula.camp logo or intrinsic flag of the event or something.
2. I think it's the first site I've ever seen that has a language
selector on the left hand side of the navigation bar.
3. Using country flags as language icons is wrong [1].
[1] - just ask the Swiss or the Belgians.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { MoonIcon, SunIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useTheme } from "./providers";
|
|
import { LanguageSelector } from "./ui/language-selector";
|
|
|
|
export function NavContainer({ children, title, }: { children: React.ReactNode, title: string }) {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex gap-4">
|
|
<Link href="/" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
|
|
<h1>{title}</h1>
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center">
|
|
{children}
|
|
<LanguageSelector />
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
|
>
|
|
{theme === "dark" ? (
|
|
<SunIcon className="h-5 w-5" />
|
|
) : (
|
|
<MoonIcon className="h-5 w-5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|