Thumbnail

Displays an image in a fixed-size container with a configurable shape, border, optional text overlay, and optional status indicator dot. The image fills the container with object-fit: cover. The container is clickable when onClick is provided.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | src | string | Yes | — | URL of the image to display. | | alt | string | No | '' | Alternative text for accessibility. | | size | 'sm' \| 'md' \| 'lg' | No | 'md' | Container size: sm = 40 px, md = 60 px, lg = 80 px. | | shape | 'circle' \| 'square' \| 'rounded' | No | 'circle' | Border-radius style applied to the container. | | border | 'none' \| 'thin' \| 'thick' | No | 'none' | Border around the container. | | status | 'online' \| 'offline' \| 'busy' | No | — | Shows a colored dot in the bottom-right corner. | | overlayText | string | No | — | Text displayed in a dark strip at the bottom of the image. | | onClick | () => void | No | — | Click handler for the thumbnail. | | className | string | No | — | Additional CSS class name. | | style | React.CSSProperties | No | — | Inline styles for the container. |

Usage

Basic avatar

import Thumbnail from '@/components/Thumbnail';

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

Product image with overlay and border

import Thumbnail from '@/components/Thumbnail';

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

User with status indicator

import Thumbnail from '@/components/Thumbnail';

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