47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "next-intl";
|
|
import { usePathname, Link } from "@/i18n/navigation";
|
|
|
|
export function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-1 py-1 shadow-sm">
|
|
<span className="hidden pl-2 text-neutral-400 sm:inline" aria-hidden>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
|
|
</svg>
|
|
</span>
|
|
<div className="flex items-center rounded-full bg-neutral-100 p-0.5 text-[11px] font-semibold text-neutral-600">
|
|
<Link
|
|
href={pathname}
|
|
locale="en"
|
|
className={`rounded-full px-2 py-1 transition ${
|
|
locale === "en"
|
|
? "bg-white text-blue-600 shadow-sm"
|
|
: "hover:text-neutral-900"
|
|
}`}
|
|
aria-current={locale === "en" ? "true" : undefined}
|
|
>
|
|
EN
|
|
</Link>
|
|
<Link
|
|
href={pathname}
|
|
locale="am"
|
|
className={`rounded-full px-2 py-1 transition ${
|
|
locale === "am"
|
|
? "bg-white text-orange-500 shadow-sm"
|
|
: "hover:text-neutral-900"
|
|
}`}
|
|
aria-current={locale === "am" ? "true" : undefined}
|
|
>
|
|
አማ
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|