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.
39 lines
922 B
TypeScript
39 lines
922 B
TypeScript
'use client'
|
|
|
|
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 = () => {
|
|
const params = useParams<{ locale: Lang }>();
|
|
const pathname = usePathname() ?? ''
|
|
|
|
const replacements = {
|
|
'pl': 'en',
|
|
'en': 'pl',
|
|
}
|
|
|
|
const lang = params?.locale || 'pl';
|
|
const otherLang = replacements[lang];
|
|
const changedLang = pathname.replace(`/${lang}`, `/${otherLang}`)
|
|
|
|
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>
|
|
</>);
|
|
};
|