85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
import type { PostMeta } from "@/lib/posts";
|
|
|
|
type FieldNotesProps = {
|
|
posts: PostMeta[];
|
|
};
|
|
|
|
function formatPostDate(date: string) {
|
|
const parsed = new Date(date);
|
|
|
|
if (Number.isNaN(parsed.getTime())) return date;
|
|
|
|
return parsed.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "2-digit",
|
|
});
|
|
}
|
|
|
|
export function FieldNotes({ posts }: FieldNotesProps) {
|
|
const recentPosts = posts.slice(0, 4);
|
|
|
|
return (
|
|
<section
|
|
id="notes"
|
|
className="border-y border-blacksite-line bg-blacksite-bg2 px-4 py-24 text-blacksite-text sm:px-6 lg:px-8"
|
|
>
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="section-label mb-3">FIELD NOTES /.04</p>
|
|
<h2 className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text sm:text-6xl">
|
|
Blog telemetry from the archive.
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
href="/blog/"
|
|
className="section-label w-fit rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
|
|
>
|
|
All field notes →
|
|
</Link>
|
|
</div>
|
|
|
|
{recentPosts.length > 0 ? (
|
|
<div className="divide-y divide-blacksite-line border-y border-blacksite-line">
|
|
{recentPosts.map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/blog/${post.slug}/`}
|
|
className="group grid gap-3 px-0 py-6 transition-colors hover:bg-blacksite-surface/55 focus-visible:outline-signal-cyan sm:grid-cols-[12rem_minmax(0,1fr)] sm:px-4"
|
|
>
|
|
<time className="section-label pt-1" dateTime={post.date}>
|
|
{formatPostDate(post.date)}
|
|
</time>
|
|
<span className="min-w-0">
|
|
<span className="block font-display text-2xl font-medium tracking-[-0.03em] text-blacksite-text transition-colors group-hover:text-signal-cyan group-focus-visible:text-signal-cyan">
|
|
{post.title}
|
|
</span>
|
|
{post.excerpt && (
|
|
<span className="mt-2 block max-w-3xl text-sm leading-6 text-blacksite-muted">
|
|
{post.excerpt}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="border border-dashed border-blacksite-line bg-blacksite-surface/45 p-8 sm:p-10">
|
|
<p className="section-label mb-5 !text-blacksite-text">
|
|
NO FIELD NOTES ON RECORD — ARCHIVE OPENS SOON
|
|
</p>
|
|
<Link
|
|
href="/blog/"
|
|
className="section-label inline-flex rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
|
|
>
|
|
Visit archive →
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|