34:I[307436,["$2","$3","$4","$5","$6","$7","$8","$9","$b","$c","$d","$e","$f","$10","$11"],"Copy"] 35:T95b,// Defined once (lib/person). Those with no picture wear their initial. const PEOPLE: Record = { twain: { name: "Mark Twain", avatar: "/mark-twain.png" }, franklin: { name: "Benjamin Franklin", avatar: "/benjamin-franklin.png" }, confucius: { name: "Confucius", avatar: "/confucius.png" }, adrian: { name: "adrian", avatar: "/adriangalilea.jpg" }, aldrin: { name: "Buzz Aldrin", avatar: "/apollo-11/aldrin.png" }, lark: { name: "lark" }, wren: { name: "wren" }, tern: { name: "tern" }, ibis: { name: "ibis" }, kite: { name: "kite" }, } /** On the hour, so the server's render and the browser's agree on every instant. */ const NOW = Math.floor(Date.now() / 3_600_000) * 3_600_000 const ago = (minutes: number) => NOW - minutes * 60_000 /** Your votes, held here; a score moves with yours (vote's optimistic rule). */ function useVotes(comments: readonly CommentData[]) { const [votes, setVotes] = React.useState>({}) const voted = React.useMemo( () => comments.map((c) => { const vote = votes[c.id] ?? 0 return vote ? { ...c, vote, score: (c.score ?? 0) + vote } : c }), [comments, votes], ) const onVote = (id: string, value: VoteValue) => setVotes((all) => ({ ...all, [id]: value })) return [voted, onVote] as const } const SMALL: CommentData[] = [ { id: "a", from: "confucius", at: ago(90), score: 64, markdown: "Real knowledge is to know the extent of one's ignorance.", }, { id: "b", from: "lark", at: ago(60), score: 12, parents: ["a"], markdown: "Which is why I read the comments.", }, { id: "c", from: "twain", at: ago(30), score: 30, parents: ["b"], markdown: "A brave choice.", }, ] function Small({ prefix }: { prefix: string }) { const [voted, onVote] = useVotes(SMALL) return ( `${prefix}-${id}`} onVote={onVote} /> ) }

36:T416d,

// Defined once (lib/person). Those with no picture wear their initial.
const PEOPLE: Record<string, Person> = {
  twain: { name: "Mark Twain", avatar: "/mark-twain.png" },
  franklin: { name: "Benjamin Franklin", avatar: "/benjamin-franklin.png" },
  confucius: { name: "Confucius", avatar: "/confucius.png" },
  adrian: { name: "adrian", avatar: "/adriangalilea.jpg" },
  aldrin: { name: "Buzz Aldrin", avatar: "/apollo-11/aldrin.png" },
  lark: { name: "lark" },
  wren: { name: "wren" },
  tern: { name: "tern" },
  ibis: { name: "ibis" },
  kite: { name: "kite" },
}

/** On the hour, so the server's render and the browser's agree on every instant. */
const NOW = Math.floor(Date.now() / 3_600_000) * 3_600_000
const ago = (minutes: number) => NOW - minutes * 60_000

/** Your votes, held here; a score moves with yours (vote's optimistic rule). */
function useVotes(comments: readonly CommentData[]) {
  const [votes, setVotes] = React.useState<Record<string, VoteValue>>({})
  const voted = React.useMemo(
    () =>
      comments.map((c) => {
        const vote = votes[c.id] ?? 0
        return vote ? { ...c, vote, score: (c.score ?? 0) + vote } : c
      }),
    [comments, votes],
  )
  const onVote = (id: string, value: VoteValue) =>
    setVotes((all) => ({ ...all, [id]: value }))
  return [voted, onVote] as const
}

const SMALL: CommentData[] = [
  {
    id: "a",
    from: "confucius",
    at: ago(90),
    score: 64,
    markdown: "Real knowledge is to know the extent of one's ignorance.",
  },
  {
    id: "b",
    from: "lark",
    at: ago(60),
    score: 12,
    parents: ["a"],
    markdown: "Which is why I read the comments.",
  },
  {
    id: "c",
    from: "twain",
    at: ago(30),
    score: 30,
    parents: ["b"],
    markdown: "A brave choice.",
  },
]

function Small({ prefix }: { prefix: string }) {
  const [voted, onVote] = useVotes(SMALL)
  return (
    <CommentThread
      comments={voted}
      people={PEOPLE}
      domId={(id) => `${prefix}-${id}`}
      onVote={onVote}
    />
  )
}

<div className="grid gap-4 lg:grid-cols-2">
  <Panel className="p-5">
    <Small prefix="plain" />
  </Panel>
  <div className="rounded-xl bg-[url(/lightbox/lake.jpg)] bg-cover bg-center p-4">
    <MaterialProvider material="glass" scheme="dark">
      <Panel className="p-5">
        <Small prefix="glass" />
      </Panel>
    </MaterialProvider>
  </div>
</div>

30:["$","div","materials",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L34",null,{"value":"$35","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$36"}}],false]}]