Web-Frontend/client/src/components/layout/Canvas/Widget.jsx

import { useSlotRecipe, chakra } from "@chakra-ui/react"

export default function Widget({ title }) {
  const recipe = useSlotRecipe({ key: "widget" });
  const styles = recipe();

  return (
    <chakra.div >
      <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>
  );
}