Web-Frontend/client/src/components/layout/Canvas/Canvas.jsx

// This Canvas component will be used to dynamically populate 
// the main canvas section of the web App with a default state
// of 'DashboardCanvas' 

import { Box } from "@chakra-ui/react";
import GlobalMapCanvas from "./views/GlobalMapCanvas";
import RegionalMapCanvas from "./views/RegionalMapCanvas";
import VolcanoCanvas from "./views/VolcanoCanvas";
import AdminCanvas from "./views/AdminCanvas";
import { DashboardCanvas } from "./views/DashboardCanvas";

export default function Canvas({ view }) {
  return (
    <Box height="100%" width="100%">
      {view === "widget" && <DashboardCanvas />}
      {view === "global" && <GlobalMapCanvas />}
      {view === "regional" && <RegionalMapCanvas />}
      {view === "volcano" && <VolcanoCanvas />}
      {view === "admin" && <AdminCanvas />}
    </Box>
  );
}