Reading Shelf

1const CONTENT = {
2  stamp: "Reading now",
3}
4 
5/** Default demo covers — typographic fallbacks (no remote images required). */
6const BOOKS = [
7  {
8    title: "Designing Data-Intensive Applications",
9    author: "Martin Kleppmann",
10    cover: "",
11    tone: "#1e3a5f",
12  },
13  {
14    title: "Refactoring",
15    author: "Martin Fowler",
16    cover: "",
17    tone: "#3d2c29",
18  },
19  {
20    title: "The Pragmatic Programmer",
21    author: "Hunt & Thomas",
22    cover: "",
23    tone: "#1a3d2e",
24  },
25]
26 
27const COVER_W = 88
28const COVER_H = 128
29 
30export function ReadingShelf({
31  stamp = CONTENT.stamp,
32  books = BOOKS,
33  className,
34}: {
35  stamp?: string
36  books?: Array<{
37    title: string
38    author: string
39    cover?: string
40    tone?: string
41  }>
42  className?: string
43} = {}) {
44  if (books.length === 0) return null
45 
46  return (
47    <section className={className ?? "mx-auto max-w-[640px]"}>
48      <div className="mb-3 flex items-baseline justify-between">
49        <h2 className="font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
50          {stamp}
51        </h2>
52        <span className="font-mono text-[11px] text-muted-foreground">
53          {books.length} book{books.length === 1 ? "" : "s"}
54        </span>
55      </div>
56 
57      <div
58        className="no-scrollbar -mx-5 flex gap-4 overflow-x-auto px-5 pb-2 sm:mx-0 sm:overflow-visible sm:px-0"
59        style={{ scrollSnapType: "x mandatory" }}
60      >
61        {books.map((book, i) => (
62          <div
63            key={book.title}
64            className="group relative shrink-0"
65            style={{
66              scrollSnapAlign: "start",
67              animationDelay: `${i * 40}ms`,
68            }}
69            title={`${book.title} — ${book.author}`}
70          >
71            <div
72              className="relative overflow-hidden rounded-[3px] transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:-translate-y-[2px]"
73              style={{
74                width: COVER_W,
75                height: COVER_H,
76                boxShadow:
77                  "0 1px 2px 0 rgba(0,0,0,0.08), 0 0 0 1px color-mix(in oklab, black 6%, transparent) inset",
78              }}
79            >
80              {book.cover ? (
81                <img
82                  src={book.cover}
83                  alt={`${book.title} by ${book.author}`}
84                  width={COVER_W * 2}
85                  height={COVER_H * 2}
86                  className="h-full w-full object-cover"
87                />
88              ) : (
89// … truncated