commerce/components/ui/locale-switcher/locale-switcher.tsx
2023-08-07 16:40:42 +02:00

87 lines
2.4 KiB
TypeScript

'use client';
import LanguageIcon from 'components/icons/language';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger
} from 'components/ui/dropdown/dropdown';
import { useLocale } from 'next-intl';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { supportedLanguages } from '../../../i18n-config';
// interface LocaleSwitcherProps {
// localeData: {
// type: string;
// locale: string;
// translations: [];
// };
// }
export default function LocaleSwitcher() {
const pathName = usePathname();
const currentLocale = useLocale();
// const translations = localeData.translations;
const redirectedPathName = (locale: string) => {
if (!pathName) return '/';
// if (translations.length > 0) {
// const translation = translations.find((obj) => {
// return obj['locale'] === locale;
// });
// if (translation) {
// const url = `/${translation['locale']}${translation['slug']}`;
// return url;
// }
// }
return `/${locale}`;
};
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
<DropdownMenuTrigger asChild>
<button
className={
'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-xs font-semibold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
}
aria-label="Language selector"
>
<LanguageIcon className="h-6 w-6" />
<span>{currentLocale}</span>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="drop-shadow-xl">
<ul className="">
{supportedLanguages.locales.map((locale) => {
if (currentLocale === locale.id) {
return;
} else {
return (
<li className="" key={locale.id}>
<Link
className="flex w-full cursor-pointer px-4 py-2 text-sm"
href={redirectedPathName(locale.id)}
>
{locale.title}
</Link>
</li>
);
}
})}
</ul>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}