AppThumb

Átomos

Imagem com proporção fixa e placeholder automático quando não há src ou o carregamento falha.

Quando usar: mídia de produtos, prêmios ou qualquer imagem de conteúdo variável em cards e grades.

Quando não usar: avatares de pessoas (use AppAvatar) ou ícones decorativos isolados.

Importar

import { AppThumb } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppThumb.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppThumb.css';

Exemplos

Default

const Default = () => <div style={{ width: 220 }}>
    <AppThumb
        alt="Caixa do produto"
        src={`data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><rect width="600" height="600" fill="#edf0f4"/><rect x="160" y="140" width="280" height="340" rx="24" fill="#0a223c"/><path d="M160 210h280v90H160z" fill="#ec2474"/><text x="300" y="375" text-anchor="middle" font-family="sans-serif" font-size="32" fill="white">PRODUTO</text></svg>')}`} />
</div>;

Sem Imagem

const SemImagem = () => <div style={{ width: 220 }}>
    <AppThumb alt="Imagem do prêmio" src={undefined} />
</div>;

Erro De Carregamento

const ErroDeCarregamento = () => <div style={{ width: 220 }}>
    <AppThumb alt="Imagem do prêmio" src="data:image/png;base64,invalid" />
</div>;

Proporcoes

const Proporcoes = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 160px), 1fr))', gap: 16, maxWidth: 520 }}>
    <AppThumb alt="1:1" ratio="1:1" src={sampleImage} />
    <AppThumb alt="4:3" ratio="4:3" src={sampleImage} />
    <AppThumb alt="3:2" ratio="3:2" src={sampleImage} />
    <AppThumb alt="16:9" ratio="16:9" src={sampleImage} />
    <AppThumb alt="3:4" ratio="3:4" src={sampleImage} />
  </div>
);

Decorativa

const Decorativa = () => <div style={{ width: 220 }}>
    <AppThumb alt="" src={undefined} />
</div>;

Props

Prop	Tipo	Padrão	Descrição
`alt`*	`string`	`—`	Texto alternativo da imagem. Obrigatório; use `""` quando a imagem é puramente decorativa.
`fit`	`"cover" \| "contain"`	`cover`	Ajuste da imagem dentro do contêiner. Padrão: `'cover'`.
`ratio`	`"1:1" \| "4:3" \| "3:2" \| "16:9" \| "3:4"`	`1:1`	Proporção fixa do contêiner. Padrão: `'1:1'`.
`rounded`	`boolean`	`true`	Arredonda os cantos no raio do card. Padrão: `true`.
`src`	`string`	`—`	URL da imagem. Sem valor, ou se a imagem falhar ao carregar, mostra o placeholder.