<% if (i18nEnabled) { %> 'use client'; import { usePathname } from 'next/navigation'; import { supportedLocales } from '@/i18n'; const LOCALE_NAMES: Record = { en: 'English', he: 'עברית', ar: 'العربية', es: 'Español', fr: 'Français', de: 'Deutsch', it: 'Italiano', pt: 'Português', nl: 'Nederlands', ja: '日本語', ko: '한국어', zh: '中文', ru: 'Русский', tr: 'Türkçe', pl: 'Polski', sv: 'Svenska', da: 'Dansk', no: 'Norsk', fi: 'Suomi', cs: 'Čeština', th: 'ไทย', vi: 'Tiếng Việt', }; const defaultLocale = '<%= defaultLocale %>'; /** * DESIGN ME — locale switcher in the header; reads supported locales from * `@/i18n` and swaps the URL prefix. Keep the aria-label and the redirect * logic exactly as-is. * * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with. */ export function LanguageSwitcher() { const pathname = usePathname(); const firstSeg = pathname.split('/')[1]; const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number]) ? firstSeg : defaultLocale; function switchLocale(newLocale: string) { // Strip any existing locale segment, then re-add only if the new one // isn't the default — matches the as-needed prefix scheme in middleware. const segments = pathname.split('/'); if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) { segments.splice(1, 1); } const bare = segments.join('/') || '/'; window.location.href = newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`; } if (supportedLocales.length <= 1) return null; return ( switchLocale(e.target.value)} aria-label="Select language" > {supportedLocales.map((locale) => ( {LOCALE_NAMES[locale] || locale} ))} ); } <% } %>