chore: initialize project
Some checks failed
Deploy monie-landing (kaniko) / build-and-deploy (push) Failing after 13s
Some checks failed
Deploy monie-landing (kaniko) / build-and-deploy (push) Failing after 13s
This commit is contained in:
46
src/components/LocaleSwitcher.tsx
Normal file
46
src/components/LocaleSwitcher.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// Locale switcher refs:
|
||||
// - Paraglide docs: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
|
||||
// - Router example: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#switching-locale
|
||||
import { getLocale, locales, setLocale } from '#/paraglide/runtime'
|
||||
import { m } from '#/paraglide/messages'
|
||||
|
||||
export default function ParaglideLocaleSwitcher() {
|
||||
const currentLocale = getLocale()
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
}}
|
||||
aria-label={m.language_label()}
|
||||
>
|
||||
<span style={{ opacity: 0.85 }}>
|
||||
{m.current_locale({ locale: currentLocale })}
|
||||
</span>
|
||||
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
||||
{locales.map((locale) => (
|
||||
<button
|
||||
key={locale}
|
||||
onClick={() => setLocale(locale)}
|
||||
aria-pressed={locale === currentLocale}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '0.35rem 0.75rem',
|
||||
borderRadius: '999px',
|
||||
border: '1px solid #d1d5db',
|
||||
background: locale === currentLocale ? '#0f172a' : 'transparent',
|
||||
color: locale === currentLocale ? '#f8fafc' : 'inherit',
|
||||
fontWeight: locale === currentLocale ? 700 : 500,
|
||||
letterSpacing: '0.01em',
|
||||
}}
|
||||
>
|
||||
{locale.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user