Env tabs

src/components/Dashboard.tsx

@@ -1,5 +1,11 @@
 import React from "react";
+import EnvTabsContainer from "./EnvTabsContainer";
+import { EnvTab } from "../types";
 
 export default function Dashboard() {
-    return <h1>Hello world</h1>;
+    const onSelectEnvTab = (tab: EnvTab): void => {
+        console.log("tab changed:", tab);
+    };
+
+    return <EnvTabsContainer onSelect={onSelectEnvTab} />;
 }

src/components/EnvTabsContainer.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { ENVIRONMENT_TABS } from "../const";
+import { EnvTab } from "../types";
+
+interface OnSelectTab {
+    (tab: EnvTab): void;
+}
+
+interface EnvTabsContainerProps {
+    onSelect: OnSelectTab;
+}
+
+export default function EnvTabsContainer({ onSelect }: EnvTabsContainerProps) {
+    const defaultTab = ENVIRONMENT_TABS[0];
+
+    const [selected, setSelected] = React.useState(defaultTab);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: EnvTab) => {
+        setSelected(newValue);
+        onSelect(newValue);
+    };
+
+    const tabs = ENVIRONMENT_TABS.map((tab, index) => {
+        return <Tab label={tab.title} key={tab.id} value={tab} />;
+    });
+
+    return (
+        <Box sx={{ width: "100%" }}>
+            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+                <Tabs value={selected} onChange={handleChange}>
+                    {tabs}
+                </Tabs>
+            </Box>
+        </Box>
+    );
+}

src/const.ts

@@ -0,0 +1,14 @@
+import { EnvTab } from "./types";
+
+export const ENVIRONMENT_TABS: EnvTab[] = [
+    {
+        title: "DEV",
+        id: "dev",
+        dashboardEndpoint: "https://intis-service-checker.dev.televendcloud.com/api/checker/v1/dashboard",
+    },
+    {
+        title: "QA",
+        id: "qa",
+        dashboardEndpoint: "https://intis-service-checker.qa.televendcloud.com/api/checker/v1/dashboard",
+    },
+];

src/types.tsx

@@ -0,0 +1,5 @@
+export type EnvTab = {
+    title: string;
+    id: string;
+    dashboardEndpoint: string;
+};