tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="skeleton"
|
|
className={cn('animate-pulse rounded-md bg-muted', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/** Linha de texto — usada em qualquer trecho aguardando conteúdo textual. */
|
|
function SkeletonText({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <Skeleton className={cn('h-4 w-full', className)} {...props} />;
|
|
}
|
|
|
|
/** Bloco de card — usada em grids de dashboard enquanto os dados carregam. */
|
|
function SkeletonCard({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return <Skeleton className={cn('h-32 w-full rounded-xl', className)} {...props} />;
|
|
}
|
|
|
|
/** Linha de tabela — usada pela `DataTable` no estado de loading. */
|
|
function SkeletonTableRow({ columns = 4 }: { columns?: number }) {
|
|
return (
|
|
<div className="flex items-center gap-4 border-b border-border px-2 py-3 last:border-0">
|
|
{Array.from({ length: columns }).map((_, index) => (
|
|
<Skeleton key={index} className="h-4 flex-1" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { Skeleton, SkeletonText, SkeletonCard, SkeletonTableRow };
|