import { Head, router } from '@inertiajs/react'; import { Globe } from 'lucide-react'; import { useState } from 'react'; import Heading from '@/components/heading'; import { LocalePickerDialog } from '@/components/locale-switcher'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { localeFlag, localeLabel, useI18n, useT } from '@/lib/i18n'; import { edit } from '@/routes/locale'; import type { SupportedLocale } from '@/types'; type Props = { supported: SupportedLocale[]; }; export default function Locale({ supported }: Props) { const { t, locale } = useT(); const { catalog } = useI18n(); const [pickerOpen, setPickerOpen] = useState(false); const switchTo = (next: SupportedLocale) => { setPickerOpen(false); if (next === locale) { return; } router.patch( '/locale/switch', { locale: next }, { preserveScroll: true, preserveState: false }, ); }; const flag = localeFlag(catalog, locale); const label = localeLabel(catalog, locale); const english = catalog[locale]?.english ?? locale; return ( <>

{t('Language')}

{flag}

{label}

{english}{' '} · {locale}

{t('Applies immediately. Affects only your account.')}

); } Locale.layout = { breadcrumbs: [ { title: 'Language', href: edit(), }, ], };