DSNiemeyer

Templates de Página

Padrões pré-definidos para os tipos de página mais comuns.

Table Page

Para CRUD listings, listagens e buscas.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <header> // Título + Botão "Novo"
  <div> // Busca + Filtros
  <div className="rounded-md border"> // Tabela
  <div> // Paginacao
</div>

Dashboard Page

Para visão geral, métricas e gráficos.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <header> // Título + Filtro de período
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> // Métricas
  <div className="grid gap-4 lg:grid-cols-2"> // Gráficos
</div>

Form Page

Para criação e edição com seções organizadas.

// Estrutura
<div className="flex flex-col gap-5 p-5 max-w-3xl">
  <header> // Título
  <form>
    <Card> // Seção com campos em grid 2 cols
    <Card> // Outra seção
    <div className="flex justify-end gap-3"> // Cancelar + Salvar
  </form>
</div>

Detail Page

Para visualização de entidades com tabs.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <nav> // Breadcrumb
  <header> // Título + Badge + Ações
  <Tabs>
    <TabsContent> // Cards com info
  </Tabs>
</div>