33:I[307436,["$2","$3","$4","$5","$6","$7","$8","$9","$b","$c","$d","$e","$f","$10","$11"],"Copy"] 36:I[195317,["$2","$3","$4","$5","$6","$7","$8","$9"],"IconMark"] 34:T838,// 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} /> ) }

35:T3873,

// 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="w-[26rem] max-w-full">
  <Small prefix="glance" />
</div>

30:["$","div","glance",{"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"}],["$","$L33",null,{"value":"$34","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$35"}}],false]}] 2b:[["$","title","0",{"children":"a short thread · comment-thread · ui"}],["$","meta","1",{"name":"description","content":"a comment section: replies nested and folded, voted or liked, answered inline"}],["$","meta","2",{"name":"robots","content":"noindex, follow"}],["$","meta","3",{"property":"og:title","content":"a short thread · comment-thread · ui"}],["$","meta","4",{"property":"og:description","content":"a comment section: replies nested and folded, voted or liked, answered inline"}],["$","meta","5",{"property":"og:url","content":"https://ui.adriangalilea.com/comment-thread/glance"}],["$","meta","6",{"property":"og:site_name","content":"ui"}],["$","meta","7",{"property":"og:type","content":"website"}],["$","meta","8",{"name":"twitter:card","content":"summary"}],["$","meta","9",{"name":"twitter:title","content":"a short thread · comment-thread · ui"}],["$","meta","10",{"name":"twitter:description","content":"a comment section: replies nested and folded, voted or liked, answered inline"}],["$","link","11",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L36","12",{}]] 2e:null