From 931380e5aad0df6e03a9d18a9c1de9959216a281 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:26:33 +0100
Subject: [PATCH] feat(ui-common): create TabsView component

---
 webapp/src/components/common/TabsView.tsx | 60 +++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 webapp/src/components/common/TabsView.tsx

diff --git a/webapp/src/components/common/TabsView.tsx b/webapp/src/components/common/TabsView.tsx
new file mode 100644
index 0000000000..3c58e07c3c
--- /dev/null
+++ b/webapp/src/components/common/TabsView.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable react/no-array-index-key */
+import { TabContext, TabList, TabListProps, TabPanel } from "@mui/lab";
+import { Tab } from "@mui/material";
+import { useState } from "react";
+import { mergeSxProp } from "../../utils/muiUtils";
+
+interface TabsViewProps {
+  items: Array<{
+    label: string;
+    content?: React.ReactNode;
+  }>;
+  TabListProps?: TabListProps;
+}
+
+function TabsView({ items, TabListProps }: TabsViewProps) {
+  const [value, setValue] = useState("0");
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+    TabListProps?.onChange?.(event, newValue);
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <TabContext value={value}>
+      <TabList
+        {...TabListProps}
+        onChange={handleChange}
+        sx={mergeSxProp(
+          { borderBottom: 1, borderColor: "divider" },
+          TabListProps?.sx,
+        )}
+      >
+        {items.map(({ label }, index) => (
+          <Tab key={index} label={label} value={index.toString()} />
+        ))}
+      </TabList>
+      {items.map(({ content }, index) => (
+        <TabPanel
+          key={index}
+          value={index.toString()}
+          sx={{
+            px: 0,
+          }}
+        >
+          {content}
+        </TabPanel>
+      ))}
+    </TabContext>
+  );
+}
+
+export default TabsView;