44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { classNames } from "@repo/config-tailwind/classNames"
|
|
import type { Locale } from "@repo/i18n/config"
|
|
import { LOCALES } from "@repo/i18n/config"
|
|
import { usePathname, useRouter } from "@repo/i18n/navigation"
|
|
import { useLocale, useTranslations } from "next-intl"
|
|
|
|
export const Locales: React.FC = () => {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const localeCurrent = useLocale() as Locale
|
|
|
|
const t = useTranslations()
|
|
|
|
return (
|
|
<section>
|
|
<ul className="flex list-none gap-6">
|
|
{LOCALES.map((locale) => {
|
|
return (
|
|
<li
|
|
key={locale}
|
|
className={classNames("rounded-md p-2", {
|
|
"border-primary dark:border-primary-dark border":
|
|
locale === localeCurrent,
|
|
})}
|
|
>
|
|
<button
|
|
className="text-primary dark:text-primary-dark font-semibold hover:underline focus:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
|
onClick={() => {
|
|
router.replace(pathname, { locale, scroll: false })
|
|
router.refresh()
|
|
}}
|
|
>
|
|
{t(`locales.${locale}`)}
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|