Log Preview

1import Link from "next/link"
2 
3/** Edit entries and labels after install. */
4const CONTENT = {
5  stamp: "Log",
6  viewAllHref: "/log",
7  viewAllLabel: "view all →",
8}
9 
10const ENTRIES = [
11  {
12    date: "2026-08-01",
13    content: "Shipped a narrow personal site kit for the registry.",
14    tags: ["ship"],
15  },
16  {
17    date: "2026-07-18",
18    content: "Tightened token mapping for hairline lists and mono stamps.",
19    tags: ["design"],
20  },
21  {
22    date: "2026-07-04",
23    content: "Added command menu and countdown building blocks.",
24    tags: ["build"],
25  },
26]
27 
28function formatDate(iso: string) {
29  const d = new Date(iso.length <= 10 ? `${iso}T00:00:00Z` : iso)
30  return new Intl.DateTimeFormat("en-US", {
31    month: "short",
32    day: "2-digit",
33    timeZone: "UTC",
34  }).format(d)
35}
36 
37export function LogPreview({
38  stamp = CONTENT.stamp,
39  viewAllHref = CONTENT.viewAllHref,
40  viewAllLabel = CONTENT.viewAllLabel,
41  entries = ENTRIES,
42  limit = 5,
43  className,
44}: {
45  stamp?: string
46  viewAllHref?: string
47  viewAllLabel?: string
48  entries?: Array<{ date: string; content: string; tags?: string[] }>
49  limit?: number
50  className?: string
51} = {}) {
52  const shown = entries.slice(0, limit)
53  if (shown.length === 0) return null
54 
55  return (
56    <section className={className ?? "mx-auto max-w-[640px]"}>
57      <div className="mb-3 flex items-baseline justify-between">
58        <h2 className="font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
59          {stamp}
60        </h2>
61        <Link
62          href={viewAllHref}
63          className="font-mono text-[11px] text-muted-foreground hover:text-foreground"
64        >
65          {viewAllLabel}
66        </Link>
67      </div>
68 
69      <ul className="divide-y divide-border-subtle">
70        {shown.map((entry, i) => (
71          <li
72            key={`${entry.date}-${i}`}
73            className="flex gap-4 py-[11px] sm:gap-5"
74          >
75            <time
76              dateTime={entry.date}
77              className="w-[56px] shrink-0 pt-[3px] font-mono text-[11px] text-muted-foreground"
78            >
79              {formatDate(entry.date)}
80            </time>
81            <div className="min-w-0 flex-1">
82              <p className="text-[14.5px] leading-[1.6] text-foreground">
83                {entry.content}
84              </p>
85              {entry.tags && entry.tags.length > 0 ? (
86                <div className="mt-1.5 flex flex-wrap gap-1">
87                  {entry.tags.map((t) => (
88                    <span
89// … truncated