Componentes (Next.js)
Localização: apps/broker-web/src/components/
Layout
header.tsx
Header do site geral (logo, navegação principal, link de login).
footer.tsx
Footer padrão do site.
broker-header.tsx
Header específico para as páginas de corretor. Recebe dados do corretor e aplica brand_color via CSS --brand. Inclui nome, foto e link de contato.
broker-footer.tsx
Footer específico do corretor com informações de contato.
Imóveis
property-card.tsx
Card de imóvel para grades de listagem. Exibe: foto de capa, título, tipo, quartos, área, bairro, preço. Linkado para a página de detalhe.
property-grid.tsx
Grade responsiva de PropertyCard. Controla layout de colunas (1/2/3 dependendo do breakpoint).
property-filters.tsx
Barra de filtros para listagem de imóveis. Controla: tipo (apartment/house/all), propósito (sale/rent/all), busca livre. Os filtros são controlados client-side e atualizam a URL via router.push.
property-gallery.tsx
Galeria de fotos do imóvel na página de detalhe. Suporta navegação entre fotos, fullscreen e swipe em mobile.
search-bar.tsx
Campo de busca livre para imóveis.
Interação
whatsapp-button.tsx
Botão flutuante de WhatsApp. Recebe o número do corretor (ou usa número padrão). Presente em todas as páginas do layout do corretor.
<WhatsAppButton number={broker.whatsapp || undefined} />
share-button.tsx
Botão de compartilhar (Web Share API com fallback para clipboard).
page-view-tracker.tsx
Componente cliente que registra page views via POST /v1/analytics/page-view para tracking de acesso por corretor.
UI Kit (components/ui/)
Primitivos baseados em shadcn/ui e Base UI. Estilizados com Tailwind e variantes CVA.
| Componente | Descrição |
|---|---|
button.tsx |
Botão com variantes: default, outline, ghost, link |
button-variants.ts |
CVA variants compartilháveis para botões |
input.tsx |
Input de texto estilizado |
select.tsx |
Select acessível |
card.tsx |
Container card com header/content/footer |
badge.tsx |
Badge/tag para status e categorias |
separator.tsx |
Linha divisória horizontal/vertical |
sheet.tsx |
Drawer lateral (mobile nav, filtros) |
Padrão de uso
import { Button } from '@/components/ui/button'
import { PropertyCard } from '@/components/property-card'
import { WhatsAppButton } from '@/components/whatsapp-button'
O alias @/ aponta para src/ (configurado em tsconfig.json).