Files
site-profile/src/components/cards/CategoryCard.astro

64 lines
1.8 KiB
Plaintext

---
interface Props {
slug: string;
title: string;
description: string;
count: number;
publishDate: string;
}
const { slug, title, description, count, publishDate } = Astro.props;
---
<div class="smooth-reveal-cards group h-full">
<a
class="card-base flex flex-col h-full min-h-55"
href={`/categories/${slug}/`}
data-astro-prefetch
>
<div class="relative grow overflow-hidden">
<div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
<div class="overflow-hidden">
<h3 class="card-text-title-major card-hover-text-title whitespace-nowrap mb-4">
{title}
</h3>
<p class="card-text-description mb-4">
{description}
</p>
</div>
<div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
<span class="inline-flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
class="mr-1"
>
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
</svg>
{count}
</span>
<span class="inline-flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
class="mr-1"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
{publishDate}
</span>
</div>
</div>
</div>
</a>
</div>