CollapsibleDetails() — supabase Function Reference

Source Code

apps/docs/features/docs/Reference.ui.tsx lines 124–157

export function CollapsibleDetails({ title, content }: { title: string; content: string }) {
  return (
    <Collapsible_Shadcn_>
      <CollapsibleTrigger_Shadcn_
        className={cn(
          'group',
          'w-full h-8',
          'border bg-surface-100 rounded',
          'px-5',
          'flex items-center gap-3',
          'text-xs text-foreground-light',
          'data-[state=open]:bg-surface-200',
          'data-[state=open]:rounded-b-none data-[state=open]:border-b-0',
          'transition-safe-all ease-out'
        )}
      >
        <ChevronRight
          size={12}
          className="group-data-[state=open]:rotate-90 transition-transform"
        />
        {title}
      </CollapsibleTrigger_Shadcn_>
      <CollapsibleContent_Shadcn_
        className={cn(
          'border border-default bg-surface-100 rounded-b',
          'px-5 py-2',
          'prose max-w-none text-sm'
        )}
      >
        <MDXRemoteRefs source={content} />
      </CollapsibleContent_Shadcn_>
    </Collapsible_Shadcn_>
  )
}