GuidesTableOfContents() — supabase Function Reference

Architecture documentation for the GuidesTableOfContents() function in GuidesTableOfContents.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ GuidesTableOfContents() — supabase Function Reference

Dependency Diagram

graph TD
  38c175c1_829a_13c7_dcc2_9ec1bafaeacf["GuidesTableOfContents()"]
  5f3e2f6c_4fa6_1787_7e25_ac49892ef91c["useTocAnchors()"]
  38c175c1_829a_13c7_dcc2_9ec1bafaeacf -->|calls| 5f3e2f6c_4fa6_1787_7e25_ac49892ef91c
  style 38c175c1_829a_13c7_dcc2_9ec1bafaeacf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/GuidesTableOfContents.tsx lines 18–52

const GuidesTableOfContents = ({ className, video }: { className?: string; video?: string }) => {
  const pathname = usePathname()
  const { toc } = useTocAnchors()

  const showFeedback = isFeatureEnabled('feedback:docs')

  const tocVideoPreview = `https://img.youtube.com/vi/${video}/0.jpg`

  return (
    <div className={cn('thin-scrollbar overflow-y-auto h-fit', 'px-px', className)}>
      <div className="w-full relative border-l flex flex-col gap-6 lg:gap-8 px-2 h-fit">
        {video && (
          <div className="relative pl-5">
            <ExpandableVideo imgUrl={tocVideoPreview} videoId={video} />
          </div>
        )}
        {showFeedback && (
          <div className="pl-5">
            <Feedback key={pathname} />
          </div>
        )}
        {toc.length !== 0 && (
          <Toc className="-ml-[calc(0.25rem+6px)]">
            <h3 className="inline-flex items-center gap-1.5 font-mono text-xs uppercase text-foreground pl-[calc(1.5rem+6px)]">
              On this page
            </h3>
            <TOCScrollArea>
              <TOCItems items={toc} />
            </TOCScrollArea>
          </Toc>
        )}
      </div>
    </div>
  )
}