'use client';
/**
* I18n - section 7 of /design-system.
*
* Live LanguageToggle demo + showing the current + dir attributes.
*/
import { LanguageToggle } from '@/components/ui/i18n/LanguageToggle';
import { Pill } from '@/components/ui/primitives/Pill';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { useT, useLocale } from '@/lib/i18n/react';
import { dirForLocale } from '@/lib/i18n';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';
/**
* Display the current and values. Derives them from
* the locale store directly instead of reading `document.documentElement`
* inside an effect - this satisfies react-hooks/set-state-in-effect AND is
* always in sync (the LocaleProvider maintains the DOM attributes).
*/
function HtmlAttrs() {
const { locale } = useLocale();
const lang = locale;
const dir = dirForLocale(locale);
return (
<html lang="{lang}">
<html dir="{dir}">
);
}
export function I18n() {
const t = useT('design_system');
return (
',
'aria-pressed reflects active locale',
]}
importSnippet={`import { LanguageToggle } from '@/components/ui/i18n/LanguageToggle';`}
>
Toggling the language updates the entire page direction live and re-runs every{' '}
useT() hook.