54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import Link from "@/components/link";
|
|
import type { HousekeepingSurface } from "../contracts";
|
|
import type { HousekeepingRecentItem } from "../recent/recent-work";
|
|
import { toHousekeepingHref } from "../routing/href";
|
|
|
|
export interface RecentWorkLabels {
|
|
readonly title: string;
|
|
readonly empty: string;
|
|
}
|
|
|
|
export function RecentWork({
|
|
items,
|
|
labels,
|
|
surface,
|
|
titles = {},
|
|
}: {
|
|
readonly items: readonly HousekeepingRecentItem[];
|
|
readonly labels: RecentWorkLabels;
|
|
readonly surface: HousekeepingSurface;
|
|
readonly titles?: Readonly<Record<string, string>>;
|
|
}) {
|
|
return (
|
|
<section
|
|
aria-labelledby="housekeeping-recent-title"
|
|
className="min-w-0 space-y-3"
|
|
>
|
|
<h2 id="housekeeping-recent-title" className="text-lg font-semibold">
|
|
{labels.title}
|
|
</h2>
|
|
{items.length === 0 ? <p>{labels.empty}</p> : null}
|
|
<ul className="space-y-2">
|
|
{items.map((item) => (
|
|
<li
|
|
key={item.routeId}
|
|
className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3"
|
|
>
|
|
<Link
|
|
href={toHousekeepingHref(item.canonicalHref, surface)}
|
|
className="break-words rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
|
|
>
|
|
{titles[item.labelKey] ?? item.routeId}
|
|
</Link>
|
|
<div className="text-xs text-[var(--admin-text-muted)]">
|
|
<span>{item.source}</span>
|
|
{" · "}
|
|
<time dateTime={item.occurredAt}>{item.occurredAt}</time>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|