From e92d12e927b234011c707bbf7b7d176bc10e13bb Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 12 Aug 2022 08:54:46 +0530
Subject: [PATCH] feat: created `Tabs` component

---
 services/frontend/src/components/Tabs.tsx | 42 +++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 services/frontend/src/components/Tabs.tsx

diff --git a/services/frontend/src/components/Tabs.tsx b/services/frontend/src/components/Tabs.tsx
new file mode 100644
index 0000000..0b59706
--- /dev/null
+++ b/services/frontend/src/components/Tabs.tsx
@@ -0,0 +1,42 @@
+import { styled } from "@mui/joy";
+import { FunctionComponent, ReactElement, ReactNode } from "react";
+
+export interface ITabsProps {
+  children: ReactNode;
+}
+
+const Root = styled("div")`
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-bottom-width: 1px;
+  border-color: #e5e7eb;
+
+  @media (min-width: 768px) {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+`;
+
+const Nav = styled("nav")`
+  display: flex;
+  margin-bottom: -1px;
+  margin-left: 1rem;
+
+  @media (min-width: 768px) {
+    margin-left: 2rem;
+  }
+`;
+
+const Tabs: FunctionComponent<ITabsProps> = (
+  props: ITabsProps
+): ReactElement => {
+  const { children } = props;
+
+  return (
+    <Root>
+      <Nav aria-label="Tabs">{children}</Nav>
+    </Root>
+  );
+};
+
+export default Tabs;