Files
openmonetis/components/skeletons/transactions-table-skeleton.tsx
Felipe Coutinho ea0b8618e0 feat: adição de novos ícones SVG e configuração do ambiente
- Adicionados ícones SVG para ChatGPT, Claude, Gemini e OpenRouter
- Implementados ícones para modos claro e escuro do ChatGPT
- Criado script de inicialização para PostgreSQL com extensão pgcrypto
- Adicionado script de configuração de ambiente que faz backup do .env
- Configurado tsconfig.json para TypeScript com opções de compilação
2025-11-15 15:49:36 -03:00

85 lines
3.2 KiB
TypeScript

import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
/**
* Skeleton fiel à tabela de lançamentos
* Mantém a mesma estrutura de colunas
*/
export function TransactionsTableSkeleton() {
return (
<div className="rounded-2xl border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[180px]">Nome</TableHead>
<TableHead className="w-[100px]">Data</TableHead>
<TableHead className="w-[120px]">Tipo</TableHead>
<TableHead className="w-[120px]">Valor</TableHead>
<TableHead className="w-[120px]">Condição</TableHead>
<TableHead className="w-[120px]">Pagamento</TableHead>
<TableHead className="w-[140px]">Pagador</TableHead>
<TableHead className="w-[140px]">Categoria</TableHead>
<TableHead className="w-[140px]">Conta/Cartão</TableHead>
<TableHead className="w-[80px]">Ações</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 8 }).map((_, i) => (
<TableRow key={i}>
<TableCell>
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Skeleton className="size-6 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Skeleton className="size-6 rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
</div>
</TableCell>
<TableCell>
<div className="flex gap-1">
<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}