40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
export function Skeleton({ className = "", style }: { className?: string; style?: React.CSSProperties }) {
|
|
return (
|
|
<div className={`animate-pulse rounded-lg bg-white/[0.06] ${className}`} style={style} />
|
|
);
|
|
}
|
|
|
|
export function StatCardSkeleton() {
|
|
return (
|
|
<div className="rounded-2xl border border-white/[0.08] p-5 space-y-3" style={{ background: "rgba(15,20,35,0.35)" }}>
|
|
<Skeleton className="h-3 w-20" />
|
|
<Skeleton className="h-8 w-24" />
|
|
<Skeleton className="h-3 w-32" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CardSkeleton({ lines = 4, className = "" }: { lines?: number; className?: string }) {
|
|
return (
|
|
<div className={`rounded-2xl border border-white/[0.08] p-5 space-y-3 ${className}`} style={{ background: "rgba(15,20,35,0.35)" }}>
|
|
<Skeleton className="h-4 w-32 mb-2" />
|
|
{Array.from({ length: lines }).map((_, i) => (
|
|
<Skeleton key={i} className="h-3" style={{ width: `${70 + Math.random() * 30}%` }} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-8 w-full rounded-lg" />
|
|
{Array.from({ length: rows }).map((_, i) => (
|
|
<Skeleton key={i} className="h-6 w-full rounded" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|