From e774cdf0312460dbd7d08b009a6b9347da1c84f7 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 7 Nov 2022 04:04:32 -0800
Subject: [PATCH] Add tabs component

---
 src/renderer/components/index.ts       |  1 +
 src/renderer/components/tabs/index.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/renderer/components/tabs/index.tsx

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index e04f912ec..7f845a68e 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -14,3 +14,4 @@ export * from './select';
 export * from './date-picker';
 export * from './scroll-area';
 export * from './paper';
+export * from './tabs';
diff --git a/src/renderer/components/tabs/index.tsx b/src/renderer/components/tabs/index.tsx
new file mode 100644
index 000000000..0bfaa1217
--- /dev/null
+++ b/src/renderer/components/tabs/index.tsx
@@ -0,0 +1,25 @@
+import {
+  Tabs as MantineTabs,
+  TabsProps as MantineTabsProps,
+} from '@mantine/core';
+import styled from 'styled-components';
+
+type TabsProps = MantineTabsProps;
+
+const StyledTabs = styled(MantineTabs)`
+  button[data-active] {
+    border-color: var(--primary-color);
+
+    &:hover {
+      border-color: var(--primary-color);
+    }
+  }
+`;
+
+export const Tabs = ({ children, ...props }: TabsProps) => {
+  return <StyledTabs {...props}>{children}</StyledTabs>;
+};
+
+Tabs.List = StyledTabs.List;
+Tabs.Panel = StyledTabs.Panel;
+Tabs.Tab = StyledTabs.Tab;