Thumbnail

Muestra una imagen en un contenedor de tamaño fijo con forma, borde, texto de overlay e indicador de estado configurables. La imagen llena el contenedor con object-fit: cover. El contenedor es clickeable cuando se provee onClick.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | src | string | Sí | — | URL de la imagen a mostrar. | | alt | string | No | '' | Texto alternativo para accesibilidad. | | size | 'sm' \| 'md' \| 'lg' | No | 'md' | Tamaño del contenedor: sm = 40 px, md = 60 px, lg = 80 px. | | shape | 'circle' \| 'square' \| 'rounded' | No | 'circle' | Estilo de border-radius del contenedor. | | border | 'none' \| 'thin' \| 'thick' | No | 'none' | Borde alrededor del contenedor. | | status | 'online' \| 'offline' \| 'busy' | No | — | Muestra un punto de color en la esquina inferior derecha. | | overlayText | string | No | — | Texto en una franja oscura en la parte inferior de la imagen. | | onClick | () => void | No | — | Handler de clic de la miniatura. | | className | string | No | — | Clase CSS adicional. | | style | React.CSSProperties | No | — | Estilos del contenedor. |

Uso

Avatar básico

import Thumbnail from '@/components/Thumbnail';

export default function Example() {
  return (
    <Thumbnail
      src="https://example.com/avatar.jpg"
      alt="Juan García"
      size="md"
      shape="circle"
    />
  );
}

Imagen de producto con overlay y borde

import Thumbnail from '@/components/Thumbnail';

export default function Example() {
  return (
    <Thumbnail
      src="https://example.com/producto.jpg"
      size="lg"
      shape="rounded"
      border="thin"
      overlayText="Nuevo"
      onClick={() => console.log('Miniatura clickeada')}
    />
  );
}

Usuario con indicador de estado

import Thumbnail from '@/components/Thumbnail';

export default function Example() {
  return (
    <Thumbnail
      src="https://example.com/user.jpg"
      size="sm"
      shape="circle"
      status="online"
    />
  );
}