componente · @solu30/ui-kit/navigation

LanguageSwitcher

Selector de idioma con bandera, que abre su propia lista desde un disparador.

4 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
gestorsalon
zentrya

El componente, montado

Cargando el espécimen…

export function SidebarUserMenuSpecimen() {
  const [lang, setLang] = useState('es')

  return (
    <Stage label="SidebarUserMenu · expandido con los dos slots (GestorSalón) y colapsado al avatar (Luigi)" tall wide>
      <div className="flex w-full flex-wrap items-start justify-center gap-8 px-1 py-1">
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            expandido · themeToggle variant=&quot;menu&quot; + languageSwitcher menuRow
          </span>
          <div className="w-[260px] rounded-xl border border-content/10 bg-container p-2">
            <SidebarUserMenu
              user={{ name: 'Milagros Ruiz', email: 'milagros@salonlasacacias.com.ar' }}
              items={[
                {
                  id: 'credits',
                  label: '3.480 de 5.000 créditos',
                  icon: <IconSparkles className="h-4 w-4" />,
                },
                { id: 'account', label: 'Mi cuenta', icon: <IconUser className="h-4 w-4" /> },
              ]}
              onLogout={() => {}}
              logoutLabel="Cerrar sesión"
              collapsed={false}
              themeToggle={<ThemeToggle variant="menu" />}
              languageSwitcher={
                <LanguageSwitcher
                  menuRow
                  languages={[
                    { code: 'es', name: 'Español', shortName: 'ES', flag: '🇦🇷' },
                    { code: 'en', name: 'English', shortName: 'EN', flag: '🇺🇸' },
                  ]}
                  currentLanguage={lang}
                  onLanguageChange={setLang}
                />
              }
            />
          </div>
        </div>

        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            colapsado · el rail de 64px — themeToggle variant=&quot;full&quot;
          </span>
          <div className="w-[64px] rounded-xl border border-content/10 bg-container p-2">
            <SidebarUserMenu
              user={{ name: 'Rocío Peralta', email: 'rocio@luigi.com.ar' }}
              items={[
                { id: 'perfil', icon: <IconUser className="h-4 w-4" />, label: 'Perfil' },
                { id: 'seguridad', icon: <IconShield className="h-4 w-4" />, label: 'Seguridad' },
              ]}
              onLogout={() => {}}
              collapsed
              themeToggle={<ThemeToggle variant="full" />}
            />
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · SidebarUserMenuSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { LanguageSwitcher } from '@solu30/ui-kit/navigation'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
languages	sí	`LanguageOption[]`	—
currentLanguage	sí	`string`	—
onLanguageChange	sí	`(code: string) => void`	—
className	opcional	`string`	—
compact	opcional	`boolean`	Icon-only trigger (flag only, no shortName/chevron) for collapsed sidebars. Matches the ThemeToggle icon-variant footprint (p-2, rounded-md) so it lines up with other sidebar icon buttons. Dropdown panel is unaffected.
menuRow	opcional	`boolean`	Full-width menu-row trigger (px-2.5 py-2, hover:bg-surface, text-content) matching SidebarUserMenu's item/logout rows — use for `<SidebarUserMenu languageSwitcher={...}>` so the flag/label align to the same left indent as the rest of the panel. Content (flag + shortName + chevron) is unchanged; only trigger padding/colors are normalized.

Ejemplo del paquete

<LanguageSwitcher
  languages={[{ code: 'es', name: 'Español', shortName: 'ES', flag: '🇦🇷' },
              { code: 'en', name: 'English', shortName: 'EN', flag: '🇬🇧' }]}
  currentLanguage={idioma}
  onLanguageChange={setIdioma}
  compact
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.