41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
// components/CatalogCardSkeleton.tsx
|
|
export default function CatalogCardSkeleton() {
|
|
return (
|
|
<div className="relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 animate-pulse">
|
|
{/* Content container */}
|
|
<div className="relative h-full flex flex-col p-6">
|
|
{/* Title section */}
|
|
<div className="mb-4">
|
|
<div className="flex items-start justify-between mb-2">
|
|
{/* Title skeleton */}
|
|
<div className="flex-1 space-y-2">
|
|
<div className="h-7 bg-white/10 rounded-md w-3/4" />
|
|
<div className="h-7 bg-white/10 rounded-md w-1/2" />
|
|
</div>
|
|
{/* Icon skeleton */}
|
|
<div className="shrink-0 w-8 h-8 rounded-full bg-white/10" />
|
|
</div>
|
|
|
|
{/* Description skeleton */}
|
|
<div className="space-y-2 mt-3">
|
|
<div className="h-4 bg-white/10 rounded w-full" />
|
|
<div className="h-4 bg-white/10 rounded w-4/5" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image container skeleton */}
|
|
<div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5">
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="w-32 h-32 bg-white/5 rounded-lg" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom accent bar skeleton */}
|
|
<div className="mt-4 h-1 w-1/3 bg-white/10 rounded-full" />
|
|
</div>
|
|
|
|
{/* Shimmer effect */}
|
|
<div className="absolute inset-0 -translate-x-full animate-shimmer bg-linear-to-r from-transparent via-white/5 to-transparent" />
|
|
</div>
|
|
);
|
|
} |