Refactor the way TABS and VIEWS are handeled, now derived inside viewKeys.js

client/src/components/Canvas/views/Home.jsx

@@ -10,6 +10,8 @@ import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 import { v4 as uuid } from 'uuid';
+import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
+import { DASHBOARD_TABS } from "@/constants/viewKeys";
 
 export default function Home(props) {
   // deconstructing props
@@ -34,8 +36,6 @@ export default function Home(props) {
       ...prev,
       {
         i: newID,
-        // x: (prev.length * 3) % 12,
-        // y: Infinity,
         x: (prev.length * W) % COLS, 
         y: 0,
         w: w, 
@@ -120,31 +120,15 @@ export default function Home(props) {
 				top="0"
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
-				px={5}
+        pl={5}
+        pr={2}
 				pt={3}
         pb={2}
 				align="center"
 				justify="space-between"
         width="100%"
       >
-        <Tabs.List>
-          <Tabs.Trigger value="mydashboard" fontSize="lg">
-            My Dashboard
-          </Tabs.Trigger>
-          <Tabs.Trigger value="gas" fontSize="lg">
-            Gas
-          </Tabs.Trigger>
-          <Tabs.Trigger value="seismic" fontSize="lg">
-            Seismic
-          </Tabs.Trigger>
-          <Tabs.Trigger value="remote" fontSize="lg">
-            Remote Sensing
-          </Tabs.Trigger>
-          <Tabs.Trigger value="daily" fontSize="lg">
-            Daily Activity
-          </Tabs.Trigger>
-        </Tabs.List>
-
+        <CanvasHeaderTabs tabs={DASHBOARD_TABS} />
         <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>