{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reading-shelf",
  "title": "Reading Shelf",
  "description": "Horizontal book-cover shelf for currently reading.",
  "files": [
    {
      "path": "registry/default/blocks/reading-shelf.tsx",
      "content": "const CONTENT = {\n  stamp: \"Reading now\",\n}\n\n/** Default demo covers — typographic fallbacks (no remote images required). */\nconst BOOKS = [\n  {\n    title: \"Designing Data-Intensive Applications\",\n    author: \"Martin Kleppmann\",\n    cover: \"\",\n    tone: \"#1e3a5f\",\n  },\n  {\n    title: \"Refactoring\",\n    author: \"Martin Fowler\",\n    cover: \"\",\n    tone: \"#3d2c29\",\n  },\n  {\n    title: \"The Pragmatic Programmer\",\n    author: \"Hunt & Thomas\",\n    cover: \"\",\n    tone: \"#1a3d2e\",\n  },\n]\n\nconst COVER_W = 88\nconst COVER_H = 128\n\nexport function ReadingShelf({\n  stamp = CONTENT.stamp,\n  books = BOOKS,\n  className,\n}: {\n  stamp?: string\n  books?: Array<{\n    title: string\n    author: string\n    cover?: string\n    tone?: string\n  }>\n  className?: string\n} = {}) {\n  if (books.length === 0) return null\n\n  return (\n    <section className={className ?? \"mx-auto max-w-[640px]\"}>\n      <div className=\"mb-3 flex items-baseline justify-between\">\n        <h2 className=\"font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase\">\n          {stamp}\n        </h2>\n        <span className=\"font-mono text-[11px] text-muted-foreground\">\n          {books.length} book{books.length === 1 ? \"\" : \"s\"}\n        </span>\n      </div>\n\n      <div\n        className=\"no-scrollbar -mx-5 flex gap-4 overflow-x-auto px-5 pb-2 sm:mx-0 sm:overflow-visible sm:px-0\"\n        style={{ scrollSnapType: \"x mandatory\" }}\n      >\n        {books.map((book, i) => (\n          <div\n            key={book.title}\n            className=\"group relative shrink-0\"\n            style={{\n              scrollSnapAlign: \"start\",\n              animationDelay: `${i * 40}ms`,\n            }}\n            title={`${book.title} — ${book.author}`}\n          >\n            <div\n              className=\"relative overflow-hidden rounded-[3px] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:-translate-y-[2px]\"\n              style={{\n                width: COVER_W,\n                height: COVER_H,\n                boxShadow:\n                  \"0 1px 2px 0 rgba(0,0,0,0.08), 0 0 0 1px color-mix(in oklab, black 6%, transparent) inset\",\n              }}\n            >\n              {book.cover ? (\n                <img\n                  src={book.cover}\n                  alt={`${book.title} by ${book.author}`}\n                  width={COVER_W * 2}\n                  height={COVER_H * 2}\n                  className=\"h-full w-full object-cover\"\n                />\n              ) : (\n                <div\n                  className=\"flex h-full w-full flex-col justify-between p-2.5\"\n                  style={{ background: book.tone ?? \"#1a1a1a\" }}\n                  aria-hidden\n                >\n                  <span className=\"font-mono text-[9px] tracking-wide text-white/70 uppercase\">\n                    {book.author.split(\" \").slice(-1)[0]}\n                  </span>\n                  <span className=\"text-[11px] leading-snug font-medium text-white\">\n                    {shortTitle(book.title, 28)}\n                  </span>\n                </div>\n              )}\n            </div>\n            <div\n              className=\"mt-2 truncate text-[11px] leading-tight text-muted-foreground\"\n              style={{ width: COVER_W }}\n            >\n              {shortTitle(book.title)}\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nfunction shortTitle(t: string, max = 22) {\n  return t.length > max ? `${t.slice(0, max - 2)}…` : t\n}\n",
      "type": "registry:component",
      "target": "components/blocks/reading-shelf.tsx"
    }
  ],
  "type": "registry:block"
}