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

import { HStack, Flex, Tabs } from "@chakra-ui/react";
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
import { SearchBar } from "../components/SearchBar";
import { SettingsButton } from "../components/SettingsButton";
import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
import { Gas } from "./DashboardCanvasNav/Gas";
import { Seismic } from "./DashboardCanvasNav/Seismic";
import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";

export function MyDashboardCanvas() {
  return (
    <Tabs.Root defaultValue="my dashboard">
      <Flex 
        as="header"
				position="sticky"
				top="0"
				bg="base200"
				px={6}
				py={3}
				align="center"
				justify="space-between"
      >
        <Tabs.List>
          <Tabs.Trigger value="my dashboard">
            My Dashboard
          </Tabs.Trigger>
          <Tabs.Trigger value="gas">
            Gas
          </Tabs.Trigger>
          <Tabs.Trigger value="seismic">
            Seismic
          </Tabs.Trigger>
          <Tabs.Trigger value="remote sensing">
            Remote Sensing
          </Tabs.Trigger>
                  <Tabs.Trigger value="daily activity">
            Daily Activity
          </Tabs.Trigger>
        </Tabs.List>

        <HStack>
          <SearchBar />
          <SettingsButton />
        </HStack>
      </Flex>

      <Tabs.Content value="my dashboard">
        <WidgetCanvas />
      </Tabs.Content>
      <Tabs.Content value="gas">
        <Gas />
      </Tabs.Content>
      <Tabs.Content value="seismic">
        <Seismic />
      </Tabs.Content>
      <Tabs.Content value="remote sensing">
        <RemoteSensing />
      </Tabs.Content>
      <Tabs.Content value="daily activity">
        <DailyActivity />
      </Tabs.Content>
    </Tabs.Root>
  );
}