NoContent

Muestra una vista de estado vacío centrada con un ícono sobre un mensaje corto. Se usa típicamente dentro de listas, tablas o paneles cuando no hay datos. El ícono admite nombres de la biblioteca y paths SVG personalizados.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | message | string | Sí | — | Texto mostrado debajo del ícono. | | icon | string | No | — | Nombre del ícono de la biblioteca. | | iconPaths | any[] | No | — | Paths SVG personalizados para el ícono. | | iconSize | number | No | 60 | Tamaño del ícono en píxeles. | | iconColor | string | No | textLight del tema | Color del ícono. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor externo. | | iconStyle | React.CSSProperties | No | — | Estilos del ícono. | | messageStyle | React.CSSProperties | No | — | Estilos del párrafo de mensaje. |

Uso

Básico

import NoContent from '@/components/NoContent';

export default function Example() {
  return (
    <NoContent
      icon="records"
      message="No se encontraron productos."
    />
  );
}

Color e ícono personalizados

import NoContent from '@/components/NoContent';

export default function Example() {
  return (
    <NoContent
      icon="search"
      iconSize={80}
      iconColor="#bdc3c7"
      message="Ningún resultado coincide con tu búsqueda."
      messageStyle={{ fontSize: 18, color: '#7f8c8d' }}
    />
  );
}