widgets are bound to container

figured out how to set bounds so widgets don't go off screen!
2025-07-22 11:58:10 -07:00
parent 999206b013
commit 37ebd3d478
4 changed files with 52 additions and 22 deletions
@@ -1,16 +1,21 @@
+import { useSlotRecipe, chakra } from "@chakra-ui/react"
+
 export default function Widget({ title }) {
-    return (
-      <>
-        <div
-          className="widget-handle"
-          style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
-        >
-          {title}
-        </div>
-        <div style={{ padding: '8px' }}>
-          This is the widget content - drag or resize me!
-        </div>
-      </>
-    );
-  }
+  const recipe = useSlotRecipe({ key: "widget" });
+  const styles = recipe();
+
+  return (
+    <chakra.div css={styles.root}>
+      <chakra.div css={styles.header}
+        className="widget-handle"
+        // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
+      >
+        {title}
+      </chakra.div>
+      <chakra.div css={styles.canvas}>
+        This is the widget content - drag or resize me!
+      </chakra.div>
+    </chakra.div>
+  );
+}