Function BlocksDemo

apps/web/components/code/blocks-demo.tsx:16–50

(props: unknown)

import { HighCode } from "../code"

export async function BlocksDemo(props: unknown) {
  const { content, component, result, caption } = parseProps(
    props,
    Block.extend({
      caption: z.string().optional(),
      content: CodeBlock,
      component: CodeBlock,
      result: CodeBlock,
    }),
  )

  const resultChildren = <CalloutCode code={result} />
  return (
    <figure className="ruler-group m-0">
      <div className="flex gap-2 items-stretch w-full flex-wrap">
        <div className="min-w-72 flex-1 ">
          <CodeWithNotes code={content} />
        </div>
        <div className="min-w-72 flex-1 min-h-full">
          <CodeWithNotes
            code={component}
            notes={{
              result: { children: resultChildren },
            }}
          />
        </div>
      </div>
      {caption && (
        <figcaption className="text-sm pt-2 text-center opacity-70">
          {caption}
        </figcaption>
      )}
    </figure>
  )
}

export async function CodeWithNotes({
  code,