Componente Mobile

Filosofia mobile-first

• Escreva CSS mobile primeiro, depois adicione breakpoints md: e lg:
• Área de toque mínima: min-h-[48px] min-w-[48px] em elementos clicáveis
• Nunca use hover como único indicador de ação — adicione sempre active: state
• Bottom navigation fixa: reserve pb-20 no layout das páginas autenticadas
• Evite modais em mobile — prefira bottom sheets (fixed bottom-0) ou páginas novas

Checklist antes de criar

• O componente já existe em src/components/ui/ (shadcn)?
• É server component ou precisa de interatividade ("use client")?
• Tem estado de loading, erro e vazio (empty state)?
• Funciona bem em tela de 375px (iPhone SE)?

Padrão de arquivo

// src/components/[categoria]/NomeComponente.tsx

// Adicione "use client" SOMENTE se necessário
// "use client"

import { type FC } from "react"

interface NomeComponenteProps {
  // props tipadas — nunca use any
}

const NomeComponente: FC<NomeComponenteProps> = ({ ...props }) => {
  return (
    // JSX aqui
  )
}

export default NomeComponente

Padrões de componentes comuns

Card de seleção (usado no fluxo de agendamento)

<button className="
  w-full flex items-center gap-4 p-4
  bg-zinc-800 rounded-xl border border-zinc-700
  active:scale-[0.98] transition-transform
  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500
">

CTA primário

<button className="
  w-full h-12 rounded-xl
  bg-amber-500 text-zinc-900 font-semibold
  active:bg-amber-400 transition-colors
  disabled:opacity-40 disabled:pointer-events-none
">

Bottom sheet

<div className="
  fixed bottom-0 left-0 right-0
  bg-zinc-900 rounded-t-2xl border-t border-zinc-800
  p-6 pb-safe
">

Estado vazio (empty state)

<div className="flex flex-col items-center gap-3 py-16 text-zinc-500">
  <IconeRelevante className="w-10 h-10" />
  <p className="text-sm">Nenhum [item] ainda</p>
</div>

Acessibilidade obrigatória

• Todo <button> sem texto visível deve ter aria-label
• Imagens decorativas: alt=""; imagens com conteúdo: alt descritivo
• Estados de loading devem ter aria-busy="true"
• Cores de texto sobre fundo zinc-800: use mínimo text-zinc-100 para contraste adequado