Options() — supabase Function Reference

Source Code

apps/docs/components/Options.tsx lines 16–43

const Options: FC<PropsWithChildren<IOptions>> & OptionsSubComponents = (props) => {
  const [open, setOpen] = useState(false)
  return (
    <div className="mt-0">
      <button
        className={[
          'px-5 py-1',
          'border-t border-l border-r border-default',
          'text-left text-sm text-foreground-light',
          'hover:bg-surface-100',
          'flex items-center gap-2',
          open ? 'w-full rounded-tl-lg rounded-tr-lg' : 'border-b rounded-full',
        ].join(' ')}
        onClick={() => setOpen(!open)}
      >
        <div>
          <div className={[!open ? 'rotate-45' : 'rotate-0'].join(' ')}>
            <XCircle size={14} />
          </div>
        </div>
        {`${!open ? `Open` : `Close`} ${props.name ?? 'accepted values'}`}
      </button>
      <div className={['opacity-0', open ? 'opacity-100 h-auto' : 'invisible h-0'].join(' ')}>
        {props.children}
      </div>
    </div>
  )
}