Evandro Fonseca Junior
5c1ccbc69a
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Globe } from "lucide-react";
|
|
import { useLocale } from "next-intl";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
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 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);
|
|
|
|
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>
|
|
);
|
|
}
|
|
|