website / src / components / BlogPost.astro

---
interface Props {
    title: string;
    published_at: Date;
    slug: string;
}

const { title, published_at, slug } = Astro.props;
import Link from "@components/Link.astro";
---

<li>
    <article>
        <h2
            class="mb-1 font-bold text-blue-700 hover:text-blue-500 hover:underline"
        >
            <Link href={`/blogs/${slug}`}>{title}</Link>
        </h2>
        <footer class="text-sm text-gray-500">
            <time datetime={published_at.toISOString()}>
                {
                    new Intl.DateTimeFormat("en-us", {
                        dateStyle: "medium",
                    }).format(new Date(published_at))
                }
            </time>
        </footer>
    </article>
</li>