Files
neurosite/src/components/CardGrid.astro
T

24 lines
892 B
Plaintext

---
export interface Props {
items: {
slug: string;
title: string;
description?: string;
badge?: string;
badgeClass?: string;
meta?: string;
}[];
}
const { items } = Astro.props;
---
{items.length > 0 && <div class="grid gap-16px my-24px" style="grid-template-columns:repeat(auto-fill,minmax(260px,1fr))">
{items.map((it) => (
<a href={`/${it.slug}/`} class="no-underline bg-card2 border border-border rounded-10px p-18px block transition-(transform border-color) duration-150 hover:translate-y--2px hover:border-accent">
{it.badge && <div class="mb-8px"><span class="badge ${it.badgeClass || ''}">${it.badge}</span></div>}
<h3 class="mb-8px text-16px text-text">{it.title}</h3>
{it.description && <p class="text-14px text-muted">{it.description}</p>}
{it.meta && <p class="text-12px text-muted">{it.meta}</p>}
</a>
))}
</div>}