look: move language selector to RHS, don't use country flags
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.
This commit is contained in:
q3k 2025-04-13 17:00:27 +02:00
parent 96861a4490
commit af1a4e6c74
2 changed files with 20 additions and 7 deletions

View file

@ -14,18 +14,17 @@ export function NavContainer({ children, title, }: { children: React.ReactNode,
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
<div className="flex gap-4">
<LanguageSelector />
<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")}
className="ml-4"
>
{theme === "dark" ? (
<SunIcon className="h-5 w-5" />

View file

@ -3,6 +3,8 @@
import { Lang } from "@/i18n/locales";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { Button } from "./button";
import { LanguagesIcon } from "lucide-react";
export const LanguageSelector = () => {
@ -15,10 +17,22 @@ export const LanguageSelector = () => {
}
const lang = params?.locale || 'pl';
const changedLang = pathname.replace(`/${lang}`, `/${replacements[lang]}`)
const otherLang = replacements[lang];
const changedLang = pathname.replace(`/${lang}`, `/${otherLang}`)
if (lang === 'pl') return (<>
<Link suppressHydrationWarning className="pt-1" href={changedLang}>🇬🇧</Link></>);
if (lang === 'en') return (<>
<Link suppressHydrationWarning className="pt-1" href={changedLang}>🇵🇱</Link></>);
return (<>
<Button
variant="ghost"
size="icon"
className="md:ml-6 w-15"
>
<Link
href={changedLang}
className="flex space-x-2 items-center"
>
<LanguagesIcon className="h-5 w-5 mr-1" />
<span>{otherLang.toUpperCase()}</span>
</Link>
</Button>
</>);
};