wip

components/Draggable/Draggable.tsx

@@ -6,16 +6,17 @@ import { useDraggable } from "@dnd-kit/core";
 import { useEffect, useRef, useState } from "react";
 import { nearestMultiple } from "./utils";
 import PreviewStore from "@/stores/previewStore";
-import Logo from "../../widgets/Logo";
-import Text from "../../widgets/Text";
+import { useWidgets } from "@/hooks/useWidgets";
 
 export default function Draggable(props: DraggablePropsType) {
   const targetRef = useRef<HTMLDivElement>(null);
   const timerRef = useRef<NodeJS.Timeout>(null);
   const [size, setSize] = useState({ width: 16, height: 16 });
-  const { id, componentsId, data, x, y, width:_width, height:_height  } = props;
+  const { id, widgetsId, data, x, y, width:_width, height:_height  } = props;
   const [width, setWidth] = useState(_width);
   const [height, setHeight] = useState(_height);
+  const {widgets, widgetsLibrary} = useWidgets();
+  
 
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id,
@@ -97,22 +98,17 @@ export default function Draggable(props: DraggablePropsType) {
           />
         </svg>
       </button>
-      {componentsLibrary[componentsId] && componentsLibrary[componentsId](data ?? {})}
+      {widgetsLibrary[widgetsId] && widgetsLibrary[widgetsId](data ?? {})}
     </div>
   );
 }
 
 export type DraggablePropsType = {
   id: string;
-  componentsId: string;
+  widgetsId: string;
   data?: Record<string, unknown>;
   x: number;
   y: number;
   width: number;
   height: number;
 };
-
-export const componentsLibrary = {
-  'logo': () => <Logo />,
-  'text': (data: DraggablePropsType["data"]) => <Text data={{ content: 'default',...data }} />,
-}