From 56c8998522d119c69d03ebe821c7efae103d2761 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 12 Aug 2022 10:47:03 +0530
Subject: [PATCH] feat: created `Tab` component

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

diff --git a/services/frontend/src/components/Tab.tsx b/services/frontend/src/components/Tab.tsx
new file mode 100644
index 0000000..68cbf86
--- /dev/null
+++ b/services/frontend/src/components/Tab.tsx
@@ -0,0 +1,59 @@
+import { useCallback } from "react";
+
+import { styled } from "@mui/joy";
+import { useTabContext } from "../hooks";
+
+export interface ITabProps {
+  value: string;
+  title: string;
+  hidden?: boolean;
+}
+
+interface IRootProps {
+  active: boolean;
+  hidden?: boolean;
+}
+
+const Root = styled("div")<IRootProps>(({ hidden, active }) => ({
+  paddingLeft: "0.25rem",
+  paddingRight: "0.25rem",
+  paddingTop: "1rem",
+  paddingBottom: "1rem",
+  fontSize: "0.875rem",
+  lineHeight: "1.25rem",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  borderBottomWidth: 2,
+
+  ...(active
+    ? { color: "#4f46e5", borderColor: "#6366f1" }
+    : {
+        color: "#6B7280",
+        borderColor: "transparent",
+
+        "&:hover": {
+          color: "#374151",
+          borderColor: "#D1D5DB"
+        }
+      }),
+
+  display: hidden ? "none" : undefined
+}));
+
+const Tab = (props: ITabProps) => {
+  const { value, title, hidden } = props;
+  const { value: open, onChange } = useTabContext();
+
+  const handleClick = useCallback((event) => {
+    event.preventDefault();
+    onChange(value);
+  }, []);
+
+  return (
+    <Root hidden={hidden} active={open === value} onClick={handleClick}>
+      {title}
+    </Root>
+  );
+};
+
+export default Tab;