PillGroup

Renderiza una lista de componentes Pill desde un arreglo pills. Soporta distribución en fila o columna, gap configurable y estilos y colores globales que se aplican a todos los pills salvo que el pill individual los sobreescriba. La prop pillTextKey indica qué clave del objeto usar como texto cuando pill.text no está definido.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | pills | PillItem[] | Sí | — | Arreglo de objetos de datos de pills. | | direction | 'row' \| 'column' | No | 'row' | Dirección del layout del grupo. | | gap | number | No | 8 | Espacio en píxeles entre pills. | | pillTextKey | string | No | 'label' | Clave usada para extraer el texto cuando pill.text no está. | | pillColor | string | No | primary del tema | Color de fondo global de todos los pills. | | pillTextColor | string | No | textShade del tema | Color de texto global de todos los pills. | | pillSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | — | Tamaño global de todos los pills. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor del grupo. | | pillContainerStyle | React.CSSProperties | No | — | Estilos del contenedor de cada pill. | | pillTextStyle | React.CSSProperties | No | — | Estilos del texto de cada pill. |

Uso

Lista de etiquetas

import PillGroup from '@/components/PillGroup';

const tags = [
  { id: 1, text: 'React' },
  { id: 2, text: 'TypeScript' },
  { id: 3, text: 'Node.js' },
];

export default function Example() {
  return <PillGroup pills={tags} pillColor="#e8f0fe" pillTextColor="#1a73e8" />;
}

Desde datos de API con clave personalizada

import PillGroup from '@/components/PillGroup';

// La API devuelve: [{ id: 1, name: 'Administrador' }, { id: 2, name: 'Viewer' }]
export default function Example({ roles }: { roles: any[] }) {
  return (
    <PillGroup
      pills={roles}
      pillTextKey="name"
      pillSize="sm"
      gap={4}
    />
  );
}