Rename and Restructure

+ took out extra 'layout' directory.
+ 'Canvas' postfix removed from all files in the views directory.
+ "WidgetCanvas" renamed to "MyDashboard"

client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx

@@ -0,0 +1,35 @@
+import { IoIosArrowBack } from "react-icons/io";
+import { Menu, Portal } from "@chakra-ui/react";
+import { v4 as uuid } from 'uuid';
+import AlertLevel from "./AlertLevelWidget";
+
+export default function AddWidgetMenu({onAddWidget, widgetArray, setWidgetArray}) {
+  function appendWidget(name) {
+    const newID = uuid();      // could be replaced with something else like guid
+    setWidgetArray([           // updating widget array containing info on the types of widgets
+      ...widgetArray,
+      {i: newID, widget: name}
+    ]);
+    onAddWidget(newID);       // updating array containing info on layout of widgets
+  }
+
+  return (
+    <Menu.Root>
+      <Menu.TriggerItem>
+        <IoIosArrowBack /> Add Widget
+      </Menu.TriggerItem>
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item 
+              value="AlertLevel" 
+              onClick={() => appendWidget(AlertLevel)}
+            >
+              Alert Level
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  )
+}

client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

@@ -0,0 +1,10 @@
+import Widget from "./Widget";
+import { Text } from "@chakra-ui/react";
+
+export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
+  return (
+    <Widget id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
+      <Text>Input volcano and country</Text>
+    </Widget>
+  );
+}

client/src/components/Canvas/CanvasComponents/CancelButton.jsx

@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function CancelButton ({onCancel}) {
+  return (
+    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+  )
+}

client/src/components/Canvas/CanvasComponents/DeleteAllButton.jsx

@@ -0,0 +1,9 @@
+import { Button } from "@chakra-ui/react";
+
+export default function DeleteAllButton ({onDeleteAll}) {
+  return (
+    <Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
+      Delete All
+    </Button>
+  )
+}

client/src/components/Canvas/CanvasComponents/SaveButton.jsx

@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function SaveButton ({onSave}) {
+  return (
+    <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+  )
+}

client/src/components/Canvas/CanvasComponents/SearchBar.jsx

@@ -0,0 +1,16 @@
+import { Input, InputGroup } from "@chakra-ui/react";
+import { FiSearch } from "react-icons/fi"
+
+export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
+    return (
+        <InputGroup startElement={<FiSearch />}>
+            <Input 
+                placeholder={placeholder} 
+                size={size}
+                width={width}
+                borderRadius="full" 
+                bg="base100"
+            />
+        </InputGroup>
+    );
+}

client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

@@ -0,0 +1,35 @@
+import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { FiSettings } from "react-icons/fi";
+import AddWidgetMenu from "./AddWidgetMenu";
+
+export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, widgetArray, setWidgetArray}) {    
+  return (
+    <Menu.Root>
+      <Menu.Trigger asChild >
+          <IconButton variant="ghost" size="md" borderRadius="xl">
+            <FiSettings />
+          </IconButton>
+      </Menu.Trigger>
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <AddWidgetMenu onAddWidget={onAddWidget} setWidgetArray={setWidgetArray} widgetArray={widgetArray}/>
+            <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
+            <Menu.Item 
+              onClick={onDeleteWidgets}
+              color="fg.error"
+              _hover={{ bg: "bg.error", color: "fg.error "}}
+            >
+              Delete Widgets
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  );
+}
+
+
+
+
+

client/src/components/Canvas/CanvasComponents/Tooltip.jsx

@@ -0,0 +1,52 @@
+import { useState, useRef } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1100); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }}
+      onClick={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }}
+    >
+      {children}
+      {isVisible && !sidebarIsOpen && (
+        <>
+          <chakra.div 
+            fontSize="xs"
+            position="absolute"
+            bg="gray.700"
+            color="white"
+            left="65px"
+            px={2}
+            py={1}
+            borderRadius="md"
+            whiteSpace="nowrap"
+            zIndex={10}
+          >
+            {content}
+          </chakra.div>
+        </>
+      )}
+    </chakra.div>
+  )
+}

client/src/components/Canvas/CanvasComponents/Widget.jsx

@@ -0,0 +1,29 @@
+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 className="widget-handle" fontWeight="bold">{title}</Text>
+          </>
+        )}
+      </chakra.div>
+      <chakra.div css={styles.canvas} >
+        {children}
+      </chakra.div>
+    </>
+  );
+}
+