55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Languages } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
|
|
|
|
type LocaleToggleProps = {
|
|
locale: string;
|
|
};
|
|
|
|
export function LocaleToggle({ locale }: LocaleToggleProps) {
|
|
const pathname = usePathname();
|
|
const locales: AppLocale[] = ["de", "en", "ar"];
|
|
const currentPath = stripLocalePrefix(pathname);
|
|
const currentLocale = (["de", "en", "ar"].includes(locale) ? locale : "de") as AppLocale;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label={`Locale: ${currentLocale.toUpperCase()}`}
|
|
>
|
|
<Languages className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="min-w-[8rem]">
|
|
{locales.map((targetLocale) => (
|
|
<DropdownMenuItem key={targetLocale} asChild>
|
|
<a
|
|
href={getLocalizedPath(targetLocale, currentPath)}
|
|
className="flex items-center justify-between gap-4"
|
|
>
|
|
<span>{targetLocale.toUpperCase()}</span>
|
|
{targetLocale === currentLocale ? (
|
|
<span className="text-xs text-muted-foreground">Active</span>
|
|
) : null}
|
|
</a>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|