Function CodeWithNotes

apps/web/components/code/blocks-demo.tsx:52–74

({
  code,
  notes = {},
}: {
  code: RawCode
  notes?: Record<string, { children: React.ReactNode }>
})

}

export async function CodeWithNotes({
  code,
  notes = {},
}: {
  code: RawCode
  notes?: Record<string, { children: React.ReactNode }>
}) {
  const highlighted = await highlight(code, theme)

  highlighted.annotations = highlighted.annotations.map((a) => {
    const note = notes[a.query]
    if (!note) return a
    return {
      ...a,
      data: {
        ...a.data,
        children: note.children,
      },
    }
  })

  return <HighCode className="min-h-full" highlighted={highlighted} />
}

async function CalloutCode({ code }: { code: RawCode }) {
  const highlighted = await highlight(code, theme)