From 76b1a2d4e95b6830c7644461dc7595276b79b04b Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Wed, 24 Jan 2024 12:12:49 +0100
Subject: [PATCH] Env tabs

---
 src/components/Dashboard.tsx        |  8 +++++-
 src/components/EnvTabsContainer.tsx | 39 +++++++++++++++++++++++++++++
 src/const.ts                        | 14 +++++++++++
 src/types.tsx                       |  5 ++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EnvTabsContainer.tsx
 create mode 100644 src/const.ts
 create mode 100644 src/types.tsx

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 999c75e..a0fe12c 100644
--- a/src/components/Dashboard.tsx
+++ b/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} />;
 }
diff --git a/src/components/EnvTabsContainer.tsx b/src/components/EnvTabsContainer.tsx
new file mode 100644
index 0000000..d51d75c
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..108d0fa
--- /dev/null
+++ b/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",
+    },
+];
diff --git a/src/types.tsx b/src/types.tsx
new file mode 100644
index 0000000..1ae164f
--- /dev/null
+++ b/src/types.tsx
@@ -0,0 +1,5 @@
+export type EnvTab = {
+    title: string;
+    id: string;
+    dashboardEndpoint: string;
+};