Introduction

Define I18n

// App.tsx
const locales: ILocale[] = [
    {
      language: 'en',
      resources: en
    },
    {
      language: 'es',
      resources: es
    }
]

return (
    <I18nProvider language='en' locales={locales}>
      // Other components
    </I18nProvider>
)

// Navbar component
export function NavbarComponent() {
    const { t, language, setLanguage } = useI18n()

    return (
        // ...
        <input type="checkbox" value="" className="sr-only peer" checked={language === 'en'} onChange={() => setLanguage(language === 'en' ? 'es' : 'en')} />
    )

// Some component
const { t } = useI18n()

return (
  <h1>t("example_text")</h1>
)