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 className="react-resizable-handle-se">
      <chakra.div css={styles.header} className="widget-handle" >
        {title}
      </chakra.div>
      <chakra.div css={styles.canvas} >
        This is the widget content - drag or resize me!
      </chakra.div>
    </chakra.div>
  );
}