27 lines
1.3 KiB
TypeScript
27 lines
1.3 KiB
TypeScript
export default function BookCardSkeleton() {
|
|
return (
|
|
<div
|
|
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg h-full border border-secondary/50 flex flex-col animate-pulse">
|
|
<div className="relative w-full h-[400px] sm:h-32 md:h-48 lg:h-64 xl:h-80 flex-shrink-0">
|
|
<div className="w-full h-full bg-secondary/30 rounded-t-xl"></div>
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent h-20"></div>
|
|
</div>
|
|
|
|
<div className="p-3 flex-1 flex flex-col justify-between">
|
|
<div>
|
|
<div className="h-4 bg-secondary/30 rounded-lg mb-2 w-3/4 mx-auto"></div>
|
|
<div className="h-3 bg-secondary/20 rounded-lg w-1/2 mx-auto"></div>
|
|
</div>
|
|
<div className="flex justify-between items-center mt-4">
|
|
<div className="h-6 bg-secondary/30 rounded-full w-16"></div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
|
|
<div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|