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

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

export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
  const recipe = useSlotRecipe({ key: "widget" });
  const styles = recipe();

  return (
    <>
      <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
        {isDelete ? (
          <>
            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
              <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
            </Flex>
          </>
        ):(
          <>
            <Text  display="flex" alignItems="center" height="32px" className="widget-handle" fontWeight="bold">{title}</Text>
          </>
        )}
      </chakra.div>
      <chakra.div height="100%">
        {children}
      </chakra.div>
    </>
  );
}