componente · @solu30/ui-kit/display

InfoSection

Lista de pares etiqueta y valor en una o dos columnas, con enlaces de mail, teléfono y botón de copiar.

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

elliot
gestorsalon
luigi

La pieza, con lugar de pantalla

Cargando el espécimen…

export function InfoMatrix() {
  return (
    <Stage label="InfoCard · 4 variantes  +  InfoSection · ficha de contacto" tall wide>
      <div className="flex w-full flex-col gap-4">
        <div className="flex w-full flex-col gap-2.5">
          {INFO_VARIANTS.map((v) => (
            <InfoCard key={v} variant={v} dismissible={v === 'info'} onDismiss={() => {}}>
              {INFO_COPY[v]}
            </InfoCard>
          ))}
        </div>
        <div className="w-full max-w-sm">
          <InfoSection items={CONTACT_ITEMS} columns={2} />
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · InfoMatrix: 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 { InfoSection } from '@solu30/ui-kit/display'

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
items	sí	`InfoItem[]`	—
columns	opcional	`1 \| 2`	—
className	opcional	`string`	—

Ejemplo del paquete

// Los valores `null`/`undefined` se dibujan como vacíos, no rompen la grilla.
<InfoSection columns={2} items={[
  { label: 'Correo', value: cliente.mail, type: 'email', copyable: true },
  { label: 'Teléfono', value: cliente.tel, type: 'tel' },
]} />

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.