74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Globe } from "lucide-react";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
const languages = [
|
|
{ code: "pt", name: "Português", flag: "🇧🇷" },
|
|
{ code: "en", name: "English", flag: "🇺🇸" },
|
|
];
|
|
|
|
export function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const t = useTranslations("header");
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// Evitar hydration mismatch com Radix UI
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const handleLanguageChange = (newLocale: string) => {
|
|
// Remove the current locale from the pathname
|
|
const pathWithoutLocale = pathname.replace(`/${locale}`, "") || "/";
|
|
// Navigate to the new locale
|
|
router.push(`/${newLocale}${pathWithoutLocale}`);
|
|
};
|
|
|
|
const _currentLanguage = languages.find((lang) => lang.code === locale);
|
|
|
|
// Renderizar placeholder durante SSR para evitar mismatch
|
|
if (!mounted) {
|
|
return (
|
|
<Button variant="outline" size="icon" disabled>
|
|
<Globe className="h-[1.2rem] w-[1.2rem]" />
|
|
<span className="sr-only">{t("language")}</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Globe className="h-[1.2rem] w-[1.2rem]" />
|
|
<span className="sr-only">{t("language")}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{languages.map((language) => (
|
|
<DropdownMenuItem
|
|
key={language.code}
|
|
onClick={() => handleLanguageChange(language.code)}
|
|
className={locale === language.code ? "bg-accent" : ""}
|
|
>
|
|
<span className="mr-2">{language.flag}</span>
|
|
<span>{language.name}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|