49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
// Dependencies
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
import Link from 'next/link'
|
|
// Components
|
|
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
|
// Languages
|
|
import en from 'site/public/locales/en/locales.json'
|
|
import es from 'site/public/locales/es/locales.json'
|
|
import de from 'site/public/locales/de/locales.json'
|
|
import fr from 'site/public/locales/fr/locales.json'
|
|
import nl from 'site/public/locales/nl/locales.json'
|
|
|
|
export const ns = ['locales']
|
|
|
|
const translations = {
|
|
en: en.en,
|
|
es: es.es,
|
|
nl: nl.nl,
|
|
de: de.de,
|
|
fr: fr.fr,
|
|
}
|
|
|
|
export const ModalLocalePicker = ({ app, iconOnly = false, bottom = false }) => {
|
|
const { t } = useTranslation(ns)
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<ModalWrapper app={app}>
|
|
<div className="grid gap-2 p-4 grid-cols-1 max-w-lg w-full">
|
|
<h2>{t('locales:chooseYourLanguage')}</h2>
|
|
{router.locales.map((locale) => (
|
|
<Link
|
|
href={
|
|
locale === router.defaultLocale ? `/${router.asPath}` : `/${locale}/${router.asPath}`
|
|
}
|
|
key={locale}
|
|
locale={locale}
|
|
className="btn btn-lg btn-primary grow"
|
|
>
|
|
<span>{t(locale)}</span>
|
|
<span className="grow"></span>
|
|
<span>{translations[locale]}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</ModalWrapper>
|
|
)
|
|
}
|