wip

components/Draggable/Preview.tsx

@@ -17,7 +17,7 @@ export default function Preview(props: PreviewPropsType) {
       left: x,
       width: width,
       height: height,
-      // visibility: width * height === 0 ? 'hidden' : 'none'
+      display: width + height + x + y === 0 ? 'none' : 'block'
     });
   }, [props.height, props.width, props.x, props.y])
   return (
@@ -25,8 +25,16 @@ export default function Preview(props: PreviewPropsType) {
       className="absolute border-2 z-50 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}
     >
-      {width * height === 0 || `${width} * ${height}`}
-      {x * y === 0 || `${x}, ${y}`}
+      <span
+        className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white top-0 p-0.5"
+      >
+        {width * height === 0 || `${width} * ${height}`}
+      </span>
+      <span
+        className="absolute text-2xl bg-emerald-500 border-emerald-500 text-white bottom-0 p-0.5"
+      >
+        {x * y === 0 || `${x}, ${y}`}
+      </span>
     </div>
   );
 }