45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client';
|
|
import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@nextui-org/react';
|
|
import { Globe, ChevronDown } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useRouter } from '@/src/navigation';
|
|
|
|
const locales = [
|
|
{ code: 'en', name: 'English' },
|
|
{ code: 'ja', name: '日本語' },
|
|
];
|
|
|
|
export default function DropdownLanguage(params: { locale: string }) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
async function changeLocale(nextLocale: string) {
|
|
let newPathname;
|
|
if (pathname.length < 4) {
|
|
// when root path
|
|
router.push('/', { locale: nextLocale });
|
|
} else {
|
|
// when not root path, trim first "/en" from pathname = "/en/projects"
|
|
newPathname = pathname.slice(params.locale.length + 1);
|
|
router.push(newPathname, { locale: nextLocale });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dropdown>
|
|
<DropdownTrigger>
|
|
<Button size="sm" variant="light" startContent={<Globe size={16} />} endContent={<ChevronDown size={16} />}>
|
|
{locales.find((locale) => locale.code === params.locale)?.name || params.locale}
|
|
</Button>
|
|
</DropdownTrigger>
|
|
<DropdownMenu aria-label="lacales">
|
|
{locales.map((entry) => (
|
|
<DropdownItem key={entry.code} onClick={() => changeLocale(entry.code)}>
|
|
{entry.name}
|
|
</DropdownItem>
|
|
))}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
);
|
|
}
|