66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import DraggablePanel from "@/components/DraggablePanel";
|
|
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="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>
|
|
);
|
|
}
|