67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
/**
|
|
* Copyright (c) 2025 miwa
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
import { Report } from "../utils/atproto.ts";
|
|
import { formatReadingTime } from "../utils/blog.ts";
|
|
|
|
export interface ReportsProps {
|
|
reports: Report[];
|
|
}
|
|
|
|
export default function Reports({ reports }: ReportsProps) {
|
|
return (
|
|
<>
|
|
<header>
|
|
<h1 id="reports-header">
|
|
$reports
|
|
<a href="/rss.xml" class="rss">
|
|
[rss
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M4 11a9 9 0 0 1 9 9" />
|
|
<path d="M4 4a16 16 0 0 1 16 16" />
|
|
<circle cx="5" cy="19" r="1" />
|
|
</svg>
|
|
]
|
|
</a>
|
|
</h1>
|
|
<h2>thoughts, ramblings, and occasional coherence</h2>
|
|
</header>
|
|
|
|
<ul class="reports">
|
|
{reports.map((report) => (
|
|
<li key={report.rkey}>
|
|
<a href={`/reports/${report.rkey}`} class="report">
|
|
<span class="date">
|
|
{report.createdAt} · {formatReadingTime(report.readingTime)}
|
|
</span>
|
|
<h3>{report.title}</h3>
|
|
<p class="excerpt">{report.excerpt}</p>
|
|
{report.tags && (
|
|
<div class="tags">
|
|
{report.tags.map((tag) => (
|
|
<span key={tag} class="tag">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<span class="arrow">→</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|