pantosite/src/components/Showcase.astro

---
import type { Post } from '../models/Post.ts';
import FormattedDate from './FormattedDate.astro';

const posts: Post[] = Astro.props.posts;
const collection: string = Astro.props.collection;

const color = Astro.props.color || 'var(--text)';
---
<section>
    <ul>
        {
            posts.map((post) => (
                <li>
                    <a href={`/${collection}/${post.id}/`}>
                        {
                            post.heroImage && (
                                <img class="heroImage" src={post.heroImage} alt="" />
                            )
                        }
                        {
                            !post.heroImage && (
                                <div class="heroImage" />
                            )
                        }
                        <h4 class="title">{post.title}</h4>
                        <p class="date">
                            <FormattedDate date={post.pubDate} />
                        </p>
                    </a>
                </li>
            ))
        }
    </ul>
</section>

<style define:vars={{ color }}>
    section {
        width: 100%;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    ul li {
        width: calc(50% - 1rem);
    }
    ul li * {
        text-decoration: none;
        transition: 0.2s ease;
    }
    ul li:first-child {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center;
    }
    ul li:first-child .heroImage {
        width: 100%;
    }
    ul li:first-child .title {
        font-size: 2.369rem;
    }
    ul li .heroImage {
        margin-bottom: 0.5rem;
        border-radius: 12px;
        height: 360px;
        object-fit: cover;
        background-color: var(--secondary);
    }
    ul li a {
        display: block;
    }
    .title {
        margin: 0;
        color: var(--color);
        line-height: 1;
    }
    .date {
        margin: 0;
        color: var(--color);
    }
    ul li a:hover h4,
    ul li a:hover .date {
        color: var(--accent);
    }
    ul a:hover .heroImage {
        box-shadow: var(--standard-box-shadow);
    }
    @media (max-width: 720px) {
        ul {
            gap: 0.5em;
        }
        ul li {
            width: 100%;
            text-align: center;
        }
        ul li:first-child {
            margin-bottom: 0;
        }
        ul li:first-child .title {
            font-size: 1.563em;
        }
    }
</style>