Update Explosion plot widget with event counts and add theme support

client/src/components/deprecated/Widget.jsx

@@ -0,0 +1,32 @@
+import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
+import { Undo } from 'lucide-react';
+
+export default function Widget(props) {
+  // deconstructing props
+  const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
+
+  const recipe = useSlotRecipe({ key: "widget" });
+  const styles = recipe();
+
+  return (
+    <Flex flexDirection="column" w="100%" h="auto">
+      {/* HEADER */}
+      <Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
+        <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
+        {isDelete ? (
+          <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
+        ):(
+          isSubmit ? (
+            <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
+          ):null
+        )}
+      </Flex>
+
+      {/* CHILDREN */}
+      <Flex w="100%" h="auto">
+        {children}
+      </Flex>
+    </Flex>
+  );
+}
+