ContributingToc() — supabase Function Reference

Source Code

apps/docs/app/contributing/ContributingToC.tsx lines 16–47

export function ContributingToc({ className }: { className?: string }) {
  const mobileToc = useBreakpoint('lg')
  const [tocItems, setTocItems] = useState<Array<TocItem>>([])

  useEffect(() => {
    const headings = [
      ...document.querySelectorAll('article.prose > h2,h3:not(#feedback-title)'),
    ] as Array<HTMLHeadingElement>
    const tocItems = headings
      .filter((heading) => !!heading.id && heading.textContent)
      .map((heading) => ({
        label: heading.textContent!.substring(0, heading.textContent!.length - 1), // Remove ending `#`
        anchor: heading.id,
      }))
    setTocItems(tocItems)
  }, [])

  return mobileToc ? (
    <MobileToc items={tocItems} />
  ) : (
    <TocBase
      items={tocItems}
      className={cn(
        '[--local-top-spacing:5rem]',
        'border-l thin-scrollbar overflow-y-auto px-2 hidden lg:block',
        'col-span-3 self-start sticky',
        'top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)]',
        className
      )}
    />
  )
}