forked from git.gladyson/openmonetis
85 lines
2.7 KiB
TypeScript
85 lines
2.7 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>
|
|
);
|
|
}
|