SortableReportBlock() — supabase Function Reference

Source Code

apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx lines 479–502

function SortableReportBlock({ id, children }: { id: string; children: ReactNode }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id,
  })

  const style: CSSProperties = {
    transform: transform
      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
      : undefined,
    transition,
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={isDragging ? 'opacity-70 will-change-transform' : 'will-change-transform'}
      {...attributes}
      {...(listeners ?? {})}
    >
      {children}
    </div>
  )
}