ReportBlockContainer() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/ReportBlock/ReportBlockContainer.tsx lines 18–86

export const ReportBlockContainer = ({
  icon,
  label,
  badge,
  actions,
  loading = false,
  draggable = false,
  showDragHandle = false,
  tooltip,
  onDragStart,
  children,
}: PropsWithChildren<ReportBlockContainerProps>) => {
  const hasChildren = Array.isArray(children)
    ? children.filter(Boolean).filter((x) => !!x.props.children).length > 0
    : !!children

  return (
    <div
      draggable={draggable}
      unselectable={draggable ? 'on' : undefined}
      onDragStart={onDragStart}
      className="h-full flex flex-col overflow-hidden bg-surface-100 border-overlay relative rounded border shadow-sm"
    >
      <Tooltip>
        <TooltipTrigger asChild>
          <div
            className={cn(
              'grid-item-drag-handle flex py-1 pl-3 pr-1 items-center gap-2 z-10 shrink-0 group h-9',
              draggable && 'cursor-move'
            )}
          >
            {showDragHandle ? (
              <GripHorizontal size={16} strokeWidth={1.5} />
            ) : icon ? (
              icon
            ) : (
              <Code size={16} strokeWidth={1.5} className="text-foreground-muted" />
            )}
            <div className={cn('flex items-center gap-2 flex-1 transition-opacity')}>
              <h3 className="heading-meta truncate">{label}</h3>
              {badge && <div className="flex items-center shrink-0">{badge}</div>}
            </div>
            <div className="flex items-center">{actions}</div>
          </div>
        </TooltipTrigger>
        {tooltip && (
          <TooltipContent asChild side="bottom">
            {tooltip}
          </TooltipContent>
        )}
      </Tooltip>
      <div
        className={cn(
          'relative flex flex-col flex-grow w-full',
          hasChildren && 'border-t overflow-hidden'
        )}
      >
        <div
          className={cn(
            'flex flex-col flex-grow items-center overflow-hidden',
            loading && 'pointer-events-none'
          )}
        >
          {children}
        </div>
      </div>
    </div>
  )
}