forked from git.gladyson/openmonetis
chore: apply pending dashboard and UI updates
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function CategoriasLoading() {
|
||||
@@ -21,32 +22,40 @@ export default function CategoriasLoading() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Grid de cards de categorias */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl border p-6 space-y-4">
|
||||
{/* Ícone + Nome */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
|
||||
{/* Tabela de categorias */}
|
||||
<Card className="py-2">
|
||||
<CardContent className="px-2 py-4 sm:px-4">
|
||||
<div className="space-y-0">
|
||||
{/* Header da tabela */}
|
||||
<div className="flex items-center gap-4 border-b px-2 pb-3">
|
||||
<Skeleton className="size-5 rounded bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
|
||||
<div className="flex-1" />
|
||||
<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
|
||||
</div>
|
||||
|
||||
{/* Linhas da tabela */}
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0"
|
||||
>
|
||||
<Skeleton className="size-8 rounded-lg bg-foreground/10" />
|
||||
<Skeleton
|
||||
className="h-4 rounded bg-foreground/10"
|
||||
style={{ width: `${100 + (i % 4) * 30}px` }}
|
||||
/>
|
||||
<div className="flex-1" />
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Descrição */}
|
||||
{i % 3 === 0 && (
|
||||
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
|
||||
)}
|
||||
|
||||
{/* Botões de ação */}
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user