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 'WidgetCanvas' 

import { Box, useRecipe } 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 AccountCanvas from "./views/AccountCanvas"
import SettingsCanvas from "./views/SettingsCanvas"
import { DashboardCanvas } from "./views/DashboardCanvas";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";

export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
  const recipe = useRecipe({ key: "canvas" });
  const styles = recipe();

    return (
        <Box height="100%" width="100%">
            {/* Check if view is a tab inside the Canvas Header */}
            { DASHBOARD_VIEWS.includes(view) && (
                <DashboardCanvas
                    view={ view }
                    layout={ layout }
                    setLayout={ setLayout }
                    setOriginalLayout={ setOriginalLayout }
                    onLayoutChange={ onLayoutChange }
                    onChangeView={ onChangeView }
                    onCancel={ onCancel }
                    isEditable={ isEditable }
                    setIsEditable={ setIsEditable }
                    isDelete={ isDelete }
                    setIsDelete={ setIsDelete }
                />
            )}
            {view === "global" && <GlobalMapCanvas />}
            {view === "regional" && <RegionalMapCanvas />}
            {view === "volcano" && <VolcanoCanvas />}
            {view === "admin" && <AdminCanvas />}
            {view === "account" && <AccountCanvas />}
            {view === "settings" && <SettingsCanvas />}
        </Box>
    );
}