51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
export function Skeleton({ className = "" }: { className?: string }) {
|
|
return <div className={`animate-pulse bg-stone-200/70 dark:bg-zinc-800 rounded ${className}`} />;
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
|
|
return (
|
|
<div className="rounded-2xl border border-stone-200 dark:border-zinc-700/60 bg-white dark:bg-zinc-900 overflow-hidden shadow-sm">
|
|
<div className="px-5 py-3.5 border-b border-stone-100 dark:border-zinc-800 flex items-center justify-between">
|
|
<Skeleton className="h-5 w-48" />
|
|
<Skeleton className="h-8 w-8 rounded-lg" />
|
|
</div>
|
|
<div className="px-4 py-2.5 border-b border-stone-100 dark:border-zinc-800 bg-stone-50/50 dark:bg-zinc-800/30 flex gap-4">
|
|
{Array.from({ length: cols }).map((_, i) => (
|
|
<Skeleton key={i} className="h-3 flex-1" />
|
|
))}
|
|
</div>
|
|
{Array.from({ length: rows }).map((_, ri) => (
|
|
<div key={ri} className="px-4 py-4 border-b border-stone-50 dark:border-zinc-800/60 flex gap-4">
|
|
{Array.from({ length: cols }).map((_, ci) => (
|
|
<Skeleton key={ci} className={`h-4 flex-1 ${ci === 0 ? "max-w-[80px]" : ""}`} />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DetailSkeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-stone-200 dark:border-zinc-700/60 px-5 py-3 flex gap-4">
|
|
<Skeleton className="h-6 w-32 rounded-full" />
|
|
<Skeleton className="h-4 w-20 mt-1" />
|
|
</div>
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-stone-200 dark:border-zinc-700/60 overflow-hidden">
|
|
<div className="px-5 py-3 border-b border-stone-100 dark:border-zinc-800">
|
|
<Skeleton className="h-4 w-32" />
|
|
</div>
|
|
<div className="grid grid-cols-3">
|
|
{Array.from({ length: 9 }).map((_, i) => (
|
|
<div key={i} className="px-5 py-4 border-b border-stone-50 dark:border-zinc-800/60">
|
|
<Skeleton className="h-3 w-20 mb-2" />
|
|
<Skeleton className="h-4 w-32" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|