Data Display Components

const MetaDialog = (props) => {
  const [open, setOpen] = useState(props.open || false);
  
  const handleSetOpenClose = (open) => {
    loopar.handleOpenCloseDialog(props.id, open);
    if(open) props.onOpen && props.onOpen();
    if(!open) props.onClose && props.onClose();
  };

  const sizes = {
    sm: "md:min-w-[45%] lg:min-w-[40%] xl:min-w-[35%]",
    md: "md:min-w-[60%] lg:min-w-[50%] xl:min-w-[45%]",
    lg: "md:min-w-[75%] lg:min-w-[70%] xl:min-w-[60%]",
    full: "min-w-[100%] min-h-[100%] max-w-[100%] max-h-[100%]",
  };

  return (
    <DialogContextProvider>
      <Dialog open={open} onOpenChange={handleSetOpenClose} key={props.id}>
        <DialogContent className={`sm:max-w-md ${sizes[props.size || "sm"]} flex flex-col`}>
          <DialogHeader>
            <DialogTitle className="flex space-x-2">
              {props.type && <Icon type={props.type} size={48} />}
              <h2 className="text-2xl">{props.title}</h2>
            </DialogTitle>
          </DialogHeader>
          <DialogDescription className="overflow-auto max-h-[80vh]">
            {content}
          </DialogDescription>
          {props.hasFooter !== false && (
            <DialogFooter>
              {(getButtons() || []).map((b) => (
                <Button
                  key={b.name}
                  variant={b.variant || "primary"}
                  onClick={(e) => {
                    e.preventDefault();
                    b.dismiss && setDialogOpen(false);
                    b.onClick();
                  }}
                >
                  {b.content || b.text || b.label}
                </Button>
              ))}
            </DialogFooter>
          )}
        </DialogContent>
      </Dialog>
    </DialogContextProvider>
  );
};

const FormTable = (props) => {
  const { selectedRows, bulkRemove, baseColumns, selectorCol, rows } = useTable();
  const { register, move, remove, append } = props;

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(TouchSensor, { activationConstraint: { delay: 100, tolerance: 5 } }),
    useSensor(MouseSensor, { activationConstraint: { delay: 100, tolerance: 5 } })
  );

  const onDragEnd = useCallback((event) => {
    const { active, over } = event;
    if (active.id !== over.id) {
      const oldIndex = rows.findIndex(f => f.id === active.id);
      const newIndex = rows.findIndex(f => f.id === over.id);
      move(oldIndex, newIndex);
    }
  }, [rows, move]);

  return (
    <div className="feed py-2">
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragEnd={onDragEnd}
      >
        <SortableContext
          items={rows.map(f => f.id)}
          strategy={verticalListSortingStrategy}
        >
          <BaseTable
            viewType={"List"}
            hasPagination={false}
            hasHeaderOptions={true}
            columns={mappedColumns}
            rowTemplate={SortableRow}
          />
        </SortableContext>
      </DndContext>
      <div className="flex flex-row gap-2">
        {selectedRows.length > 0 && (
          <Button
            type="button"
            variant="destructive"
            onClick={e => {
              e.preventDefault();
              bulkRemove(false);
            }}
          >
            <Trash2Icon className="mr-1" size={16} />
            Remove
          </Button>
        )}
        <Button
          type="button"
          variant="primary"
          onClick={handleAppend}
        >
          <PlusIcon className="mr-1" size={16} />
          Add row
        </Button>
      </div>
    </div>
  )
}

export default function Carrusel(props){
  const { designerMode, updateElements } = useDesigner();
  
  const data = props.data || {};
  const defaultElements = [
    {
      element: "banner",
      data: {
        key: `${data.key}-1`,
        label: "Slider 1..",
        text: "Slide 1..",
        color_overlay: "rgba(0,0,0,0.3)",
        background_image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80"
      },
    },
    {
      element: "banner",
      data: {
        key: `${data.key}-2`,
        label: "Slider 2..",
        text: "Slide 2..",
        color_overlay: "rgba(0,0,0,0.3)",
        background_image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&q=80",
      },
    },
  ];

  return (
    <Preassembled
      {...props}
      notDroppable={true} 
      defaultElements={defaultElements}
    >
      <BaseCarrusel
        {...props}
        addSlide={addSlide}
      />
    </Preassembled>
  );
}