33:I[307436,["$2","$3","$4","$5","$6","$7","$8","$9","$b","$c","$d","$e","$f","$10","$11"],"Copy"] 34:Ta23,// 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 /** The parts by hand: a comment with a badge by the name and a vote beside it, its * one reply, no reply box. What the preset composes, laid out yourself. */ function Parts() { const [vote, setVote] = React.useState(0) const op = PEOPLE.franklin as Person const reply = PEOPLE.wren as Person return ( } replies={1} > op } >

Rendered already: this body is React, worn in markdown's look.

) } 35:T3d1e,

// 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

/** The parts by hand: a comment with a badge by the name and a vote beside it, its
 *  one reply, no reply box. What the preset composes, laid out yourself. */
function Parts() {
  const [vote, setVote] = React.useState<VoteValue>(0)
  const op = PEOPLE.franklin as Person
  const reply = PEOPLE.wren as Person
  return (
    <Comments label="one comment">
      <Comment
        id="parts-1"
        author={op.name}
        face={<CommentFace person={op} />}
        replies={1}
      >
        <CommentHead>
          <CommentAuthor person={op}>
            <span className="rounded bg-current/8 px-1 font-medium text-[10px] uppercase tracking-wide">
              op
            </span>
          </CommentAuthor>
          <CommentTime at={ago(15)} href="#parts-1" />
        </CommentHead>
        <CommentBody markdown="An investment in knowledge pays the best interest." />
        <CommentActions>
          <Vote
            compact
            size="sm"
            orientation="horizontal"
            value={vote}
            score={7 + vote}
            onValueChange={setVote}
            aria-label="vote on Franklin's comment"
          />
          <CommentLink href="#parts-1" />
        </CommentActions>
        <CommentReplies>
          <Comment
            id="parts-2"
            author={reply.name}
            face={<CommentFace person={reply} />}
          >
            <CommentHead>
              <CommentAuthor person={reply} />
              <CommentTime at={ago(5)} />
            </CommentHead>
            <CommentBody>
              <p>
                Rendered already: <em>this body is React</em>, worn in
                markdown's look.
              </p>
            </CommentBody>
          </Comment>
        </CommentReplies>
      </Comment>
    </Comments>
  )
}

<Parts />

2f:["$","div","parts",{"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]}]