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

import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
import { FaEllipsisH } from "react-icons/fa";

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>
          </>
        ):(
          <>
            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
              <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
              <IconButton size="xs" bg="base300" cursor="pointer"><FaEllipsisH fill="text"/></IconButton>
            </Flex>
          </>
        )}
      </chakra.div>
      <chakra.div height="100%" mb="3">
        {children}
      </chakra.div>
    </>
  );
}