new-manga/src/components/LoadingCard.astro
2025-03-07 15:04:34 -07:00

26 lines
No EOL
982 B
Text

---
---
<div class="bg-secondary rounded-xl overflow-hidden shadow-lg h-full flex flex-col max-w-[280px] mx-auto border border-hover/30">
<div class="relative overflow-hidden aspect-[2/3] rounded-t-xl bg-hover animate-pulse"></div>
<div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary relative rounded-b-xl">
<div class="absolute -top-8 left-3 right-3 bg-hover animate-pulse h-12 rounded-lg"></div>
<div class="mt-6">
<div class="bg-hover animate-pulse h-8 w-24 rounded-full"></div>
<div class="mt-3">
<div class="flex flex-wrap gap-2">
{[1, 2, 3].map(() => (
<div class="bg-hover animate-pulse h-6 w-16 rounded-full"></div>
))}
</div>
</div>
</div>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="bg-hover animate-pulse h-4 w-32 rounded"></div>
<div class="bg-hover animate-pulse h-4 w-20 rounded"></div>
</div>
</div>
</div>