Render a Reading Outline

import {
  ReadingOutline,
  SiteDocSection,
  SiteText,
  type ReadingOutlineProps,
} from '@n3wth/ui/site'

const items: ReadingOutlineProps['items'] = [
  { id: 'requirements', label: 'Requirements', level: 2 },
  { id: 'usage', label: 'Usage', level: 2 },
]

export function Article() {
  return (
    <>
      <ReadingOutline items={items} label="Article sections" collapsible />
      <SiteDocSection id="requirements" title="Requirements">
        <SiteText>Import the stylesheet and mount the provider.</SiteText>
      </SiteDocSection>
      <SiteDocSection id="usage" title="Usage">
        <SiteText>Compose your page with shared components.</SiteText>
      </SiteDocSection>
    </>
  )
}