wip

components/Draggable/Preview.tsx

@@ -0,0 +1,35 @@
+"use client";
+import "@/app/globals.css";
+import { CSSProperties, useEffect, useState } from "react";
+
+export default function Preview(props: PreviewPropsType) {
+  const {x, y, width, height} = props;
+  const [style, setStyle] = useState<CSSProperties>({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    setStyle({
+      top: x,
+      left: y,
+      width: width,
+      height: height,
+    });
+  }, [height, props, width, x, y])
+  return (
+    <div
+      className="absolute border-2 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
+      style={style}
+    ></div>
+  );
+}
+
+export type PreviewPropsType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};