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

import GlobalMap from "./views/GlobalMap";
import RegionalMap from "./views/RegionalMap";
import Volcano from "./views/Volcano";
import Admin from "./views/Admin";
import Account from "./views/Account"
import Home from "./views/Home";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
import { chakra } from "@chakra-ui/react";
import Personal from "./views/Personal";
import Security from "./views/Security";

export default function Canvas({...props}) {
  const { view } = props;
    return (
        <chakra.div width="100%" height="100%">
            {/* Check if view is a tab inside the Canvas Header */}
            { DASHBOARD_VIEWS.includes(view) && (
                <Home {...props}/>
            )}
            {view === "global" && <GlobalMap />}
            {view === "regional" && <RegionalMap />}
            {view === "volcano" && <Volcano />}
            {view === "admin" && <Admin />}
            {view === "account" && <Account />}
            {view === "settings" && <Personal />}
            {view === "personal" && <Personal />}
            {view === "security" && <Security />}
        </chakra.div>
    );
}