wip

app/page.tsx

@@ -1,20 +1,64 @@
+"use client";
+import { useState } from "react";
 import DraggablePanel from "@/components/DraggablePanel";
-import DraggableWidget from "@/components/DraggableWidget";
 import Logo from "@/components/Logo";
+import Preview from "@/components/Draggable/Preview";
+import Draggable from "@/components/Draggable/Draggable";
+import { useComponentsStore } from "@/hooks/useComponentsStore";
 
 export default function Home() {
+  const [isChangeSize, setIsSizeChangeSize] = useState(false);
+  const [isDraggable, setIsDraggable] = useState(false);
+  const [units, setUnit] = useComponentsStore([
+    {
+      id: "1",
+      x: 0,
+      y: 0,
+      width: 320,
+      height: 160,
+      component: ()=> <Logo />
+    },
+    {
+      id: "2",
+      x: 336,
+      y: 0,
+      width: 160,
+      height: 320,
+      component: ()=> <Logo />
+    },
+  ]);
+
   return (
-    <div className="w-screen h-screen p-4">
-      <DraggablePanel draggable={true}>
-        <DraggableWidget draggable={false} x={0} y={0} w={10} h={10}>
-          <Logo />
-        </DraggableWidget>
-        <DraggableWidget draggable={false} x={10} y={0} w={10} h={10}>
-          <Logo />
-        </DraggableWidget>
-        <DraggableWidget draggable={false} x={0} y={10} w={10} h={10}>
-          <Logo />
-        </DraggableWidget>
+    <div className="h-screen w-screen p-4">
+      <Preview x={400} y={234} width={234} height={234} />
+      <label className="swap">
+        <input
+          type="checkbox"
+          onChange={(e) => setIsSizeChangeSize(e.target.checked)}
+        />
+        <div className="swap-on">编辑</div>
+        <div className="swap-off">锁定</div>
+      </label>
+      <label className="swap">
+        <input
+          type="checkbox"
+          onChange={(e) => setIsDraggable(e.target.checked)}
+        />
+        <div className="swap-on">拖拽</div>
+        <div className="swap-off">锁定</div>
+      </label>
+      <DraggablePanel draggable={isDraggable}>
+        {units.map((item) => (
+          <Draggable
+            key={item.id}
+            id={item.id}
+            x={item.x}
+            y={item.y}
+            width={item.width}
+            height={item.height}
+            component={() => <Logo />}
+          />
+        ))}
       </DraggablePanel>
     </div>
   );