66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
export function SkeletonCard({ count = 4 }: { count?: number }) {
|
|
return (
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div key={i} className="dg-card p-4 animate-pulse">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)]" />
|
|
<div className="flex-1 space-y-2">
|
|
<div className="h-6 w-12 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
<div className="h-3 w-16 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonTable({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
|
|
return (
|
|
<div className="dg-card animate-pulse">
|
|
<div className="p-0">
|
|
<div className="flex gap-4 px-5 py-3 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
|
|
{Array.from({ length: cols }).map((_, i) => (
|
|
<div key={i} className="h-4 flex-1 bg-[var(--dg-bg-primary)] rounded max-w-[120px]" />
|
|
))}
|
|
</div>
|
|
{Array.from({ length: rows }).map((_, r) => (
|
|
<div key={r} className="flex gap-4 px-5 py-3.5 border-b border-[var(--dg-border-light)]">
|
|
{Array.from({ length: cols }).map((_, c) => (
|
|
<div key={c} className="h-4 flex-1 bg-[var(--dg-bg-tertiary)] rounded max-w-[120px]" />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonDetail() {
|
|
return (
|
|
<div className="space-y-5 animate-pulse max-w-5xl">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)]" />
|
|
<div className="space-y-2">
|
|
<div className="h-7 w-48 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
<div className="h-4 w-32 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-5">
|
|
<div className="dg-card p-5 space-y-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="flex justify-between py-2">
|
|
<div className="h-4 w-24 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
<div className="h-4 w-32 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="dg-card p-5">
|
|
<div className="h-48 bg-[var(--dg-bg-tertiary)] rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|