45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
export function CertCardSkeleton({ count = 6 }: { count?: number }) {
|
|
return (
|
|
<>
|
|
<article className="flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 w-full">
|
|
{/* Badge row */}
|
|
<div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{/* Award badge */}
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="w-2.5 h-2.5 rounded-sm bg-red-900/40 animate-pulse" />
|
|
<div className="h-2.5 w-20 rounded-full bg-red-900/40 animate-pulse" />
|
|
</div>
|
|
{/* Category pill */}
|
|
<div className="h-4 w-16 rounded-full border border-white/10 bg-white/5 animate-pulse" />
|
|
</div>
|
|
|
|
{/* Title lines */}
|
|
<div className="space-y-1.5 pt-1">
|
|
<div className="h-3.5 w-full rounded bg-white/8 animate-pulse" />
|
|
<div className="h-3.5 w-3/4 rounded bg-white/8 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />
|
|
|
|
{/* Document list */}
|
|
<ul className="flex flex-col gap-2.5">
|
|
{Array.from({ length: 3 }).map((_, di) => (
|
|
<li key={di} className="flex items-start gap-2.5">
|
|
<span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-900/40 animate-pulse" />
|
|
<div
|
|
className="h-3 rounded bg-white/8 animate-pulse"
|
|
style={{ width: `${75 - di * 10}%` }}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
</>
|
|
);
|
|
}
|