58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface SkeletonProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function Skeleton({ className }: SkeletonProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"animate-pulse rounded-md bg-slate-200 dark:bg-slate-700",
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function StatsCardSkeleton() {
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-12 w-12 rounded-full" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-8 w-16" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: rows }).map((_, i) => (
|
|
<div key={i} className="flex gap-4">
|
|
<Skeleton className="h-12 flex-1" />
|
|
<Skeleton className="h-12 w-32" />
|
|
<Skeleton className="h-12 w-24" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CardSkeleton() {
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6 space-y-4">
|
|
<Skeleton className="h-6 w-40" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-5/6" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|