1 files changed, 47 insertions, 0 deletions

diff --git a/src/ui/components/ReleaseCard.tsx b/src/ui/components/ReleaseCard.tsx
new file mode 100644
index 0000000..bffe256
--- /dev/null
+++ b/src/ui/components/ReleaseCard.tsx
@@ -0,0 +1,47 @@
+import type { Select } from "corvos";
+
+import type site from "@/corvos.config.ts";
+
+import { CardBody } from "$/ui/objects/CardBody.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+
+import { Card, type Props as CardProps } from "../objects/Card.tsx";
+
+export type Props = CardProps<"a"> & {
+        "heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "page": Select<typeof site, ".html", { type: "release" }>;
+};
+
+export const ReleaseCard = ({ "heading-level": headingLevel, page, ...props }: Props) => {
+        return (
+                <Card
+                        as="a"
+                        class="c-with-visited-indicator h-entry u-url"
+                        horizontal
+                        href={page.url}
+                        {...props}
+                >
+                        <CardBody class="c-with-visited-indicator__indicator u-pie-0" />
+
+                        <CardBody main>
+                                <Heading as={headingLevel} class="p-name">
+                                        <span class="u-mie-100">{page.data.title}</span>
+                                </Heading>
+                        </CardBody>
+
+                        <CardBody as="small" class="u-c-mute u-d-none@sm-lo">
+                                <ul class="l-hlist l-hlist--separated">
+                                        <li class="l-hlist__item">
+                                                <time class="dt-published" datetime={page.data.date.toISOString()}>
+                                                        {page.data.date.toLocaleDateString(undefined, {
+                                                                day: "numeric",
+                                                                month: "short",
+                                                                year: "numeric",
+                                                        })}
+                                                </time>
+                                        </li>
+                                </ul>
+                        </CardBody>
+                </Card>
+        );
+};