Home/Componentes/InfoCard

InfoCard

Card informativo com efeitos hover e botões de ação interativos.

Preview

Visualização do componente InfoCard com diferentes estados

Aguardando aprovação

Veículo: Truck Volvo FH540

Solicitante:

João Silva

Finalidade:

Transporte de Carga

Período:

15/01/2025 - 30/01/2025

Descrição:

Solicitação para transporte de equipamentos industriais para obra em Santos. Viagem de longa distância com necessidade de motorista especializado.

Modificações:

Instalação de kit de segurança adicional e GPS tracker para monitoramento em tempo real da carga.

Análise técnica

Veículo: Mercedes Actros 2646

Solicitante:

Maria Santos

Finalidade:

Logística Urbana

Período:

20/01/2025 - 25/01/2025

Descrição:

Transporte de materiais de construção para múltiplas obras na região metropolitana. Operação com várias paradas programadas.

Modificações:

Adaptação da carroceria para diferentes tipos de carga e sistema de amarração reforçado.

Revisão final

Veículo: Scania R450

Solicitante:

Carlos Oliveira

Finalidade:

Transporte Especial

Período:

10/02/2025 - 15/02/2025

Descrição:

Transporte de equipamento industrial de grande porte. Requer escolta e planejamento de rota específico devido às dimensões da carga.

Modificações:

Configuração especial do semi-reboque e instalação de sinalização adicional para transporte de carga oversized.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add info-card

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Uso do InfoCard

import { InfoCard } from "@scmposs/hollow-ui"

const data = {
  id: "001",
  status: "Aguardando aprovação",
  veiculo: "Truck Volvo FH540",
  solicitante: "João Silva",
  finalidade: "Transporte de Carga",
  periodo: "15/01/2025 - 30/01/2025",
  descricao: "Descrição detalhada da solicitação...",
  modificacoes: "Modificações necessárias..."
};

const handleAprovar = (id) => {
  console.log("Aprovado:", id);
};

const handleReprovar = (id) => {
  console.log("Reprovado:", id);
};

<InfoCard
  {...data}
  onAprovar={handleAprovar}
  onReprovar={handleReprovar}
/>

Características

✨ Efeitos Hover

Animações suaves com escala e sombra ao passar o mouse

🎯 Botões Interativos

Botões de ação que aparecem somente no hover

📱 Responsivo

Layout adaptável para diferentes tamanhos de tela

⚡ Performance

Otimizado com will-change-transform

Props

InfoCard Props

idstring

statusstring

veiculostring

solicitantestring

finalidadestring

periodostring

descricaostring

modificacoesstring

onAprovar?(id: string) => void

onReprovar?(id: string) => void