blob: 5b7b3461656c470a2d00821a3f0c71e8a68eaf57 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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) => {
const time = (
<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>
);
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>
<small class="u-c-mute u-d-none@sm-hi">
<ul class="l-hlist l-hlist--separated">{time}</ul>
</small>
</CardBody>
<CardBody as="small" class="u-c-mute u-d-none@sm-lo">
<ul class="l-hlist l-hlist--separated">{time}</ul>
</CardBody>
</Card>
);
};
|
