{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "journal-content",
  "title": "Journal",
  "description": "Blog index layout with editable CONTENT posts.",
  "dependencies": [
    "next"
  ],
  "files": [
    {
      "path": "registry/default/blocks/journal-content.tsx",
      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { useMemo, useState } from \"react\"\n\n/** Edit CONTENT.posts for your journal index. */\nconst CONTENT = {\n  title: \"Journal\",\n  blurb: \"Notes on shipping product UI.\",\n  posts: [\n    {\n      slug: \"own-the-ui\",\n      title: \"Own the UI with the shadcn registry\",\n      description: \"Why copy-into-repo beats black-box packages for marketing UI.\",\n      date: \"2026-08-01\",\n    },\n    {\n      slug: \"dark-first-tokens\",\n      title: \"Dark-first tokens that survive light mode\",\n      description: \"How AtroUI structures CSS variables for black-canvas products.\",\n      date: \"2026-07-20\",\n    },\n  ],\n}\n\nexport function JournalContent() {\n  const [q, setQ] = useState(\"\")\n  const posts = useMemo(() => {\n    const needle = q.trim().toLowerCase()\n    if (!needle) return CONTENT.posts\n    return CONTENT.posts.filter(\n      (p) =>\n        p.title.toLowerCase().includes(needle) ||\n        p.description.toLowerCase().includes(needle)\n    )\n  }, [q])\n\n  return (\n    <div className=\"space-y-8\">\n      <header>\n        <p className=\"ms-stamp\">{CONTENT.title}</p>\n        <p className=\"mt-2 text-sm text-muted-foreground\">{CONTENT.blurb}</p>\n        <input\n          value={q}\n          onChange={(e) => setQ(e.target.value)}\n          placeholder=\"Search posts…\"\n          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\"\n        />\n      </header>\n      <ul className=\"divide-y divide-border-subtle border-y border-border-subtle\">\n        {posts.map((post) => (\n          <li key={post.slug}>\n            <Link\n              href={`/journal/${post.slug}`}\n              className=\"block py-5 transition-colors hover:bg-muted/20\"\n            >\n              <p className=\"font-mono text-[11px] text-muted-foreground\">\n                {post.date}\n              </p>\n              <h3 className=\"mt-1 text-lg font-medium text-foreground\">\n                {post.title}\n              </h3>\n              <p className=\"mt-1 text-sm text-muted-foreground\">\n                {post.description}\n              </p>\n            </Link>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/journal-content.tsx"
    }
  ],
  "type": "registry:block"
}