Journal

1"use client"
2 
3import Link from "next/link"
4import { useMemo, useState } from "react"
5 
6/** Edit CONTENT.posts for your journal index. */
7const CONTENT = {
8  title: "Journal",
9  blurb: "Notes on shipping product UI.",
10  posts: [
11    {
12      slug: "own-the-ui",
13      title: "Own the UI with the shadcn registry",
14      description: "Why copy-into-repo beats black-box packages for marketing UI.",
15      date: "2026-08-01",
16    },
17    {
18      slug: "dark-first-tokens",
19      title: "Dark-first tokens that survive light mode",
20      description: "How AtroUI structures CSS variables for black-canvas products.",
21      date: "2026-07-20",
22    },
23  ],
24}
25 
26export function JournalContent() {
27  const [q, setQ] = useState("")
28  const posts = useMemo(() => {
29    const needle = q.trim().toLowerCase()
30    if (!needle) return CONTENT.posts
31    return CONTENT.posts.filter(
32      (p) =>
33        p.title.toLowerCase().includes(needle) ||
34        p.description.toLowerCase().includes(needle)
35    )
36  }, [q])
37 
38  return (
39    <div className="space-y-8">
40      <header>
41        <p className="ms-stamp">{CONTENT.title}</p>
42        <p className="mt-2 text-sm text-muted-foreground">{CONTENT.blurb}</p>
43        <input
44          value={q}
45          onChange={(e) => setQ(e.target.value)}
46          placeholder="Search posts…"
47          className="mt-4 w-full max-w-md rounded-lg border border-border-subtle bg-background px-4 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
48        />
49      </header>
50      <ul className="divide-y divide-border-subtle border-y border-border-subtle">
51        {posts.map((post) => (
52          <li key={post.slug}>
53            <Link
54              href={`/journal/${post.slug}`}
55              className="block py-5 transition-colors hover:bg-muted/20"
56            >
57              <p className="font-mono text-[11px] text-muted-foreground">
58                {post.date}
59              </p>
60              <h3 className="mt-1 text-lg font-medium text-foreground">
61                {post.title}
62              </h3>
63              <p className="mt-1 text-sm text-muted-foreground">
64                {post.description}
65              </p>
66            </Link>
67          </li>
68        ))}
69      </ul>
70    </div>
71  )
72}