From b3f4cfee5d8c9704ca9c819f4a29b73cf24dd648 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 28 Oct 2022 13:03:10 -0700
Subject: [PATCH] Add switch component

---
 src/renderer/components/index.ts         |  1 +
 src/renderer/components/switch/index.tsx | 27 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/renderer/components/switch/index.tsx

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index b09648610..45fdba862 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -8,3 +8,4 @@ export * from './input';
 export * from './segmented-control';
 export * from './dropdown-menu';
 export * from './toast';
+export * from './switch';
diff --git a/src/renderer/components/switch/index.tsx b/src/renderer/components/switch/index.tsx
new file mode 100644
index 000000000..6ff7bb452
--- /dev/null
+++ b/src/renderer/components/switch/index.tsx
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import {
+  Switch as MantineSwitch,
+  SwitchProps as MantineSwitchProps,
+} from '@mantine/core';
+
+type SwitchProps = MantineSwitchProps;
+
+const StyledSwitch = styled(MantineSwitch)`
+  & .mantine-Switch-track {
+    background-color: var(--switch-track-bg);
+  }
+
+  & .mantine-Switch-input {
+    &:checked + .mantine-Switch-track {
+      background-color: var(--switch-track-enabled-bg);
+    }
+  }
+
+  & .mantine-Switch-thumb {
+    background-color: var(--switch-thumb-bg);
+  }
+`;
+
+export const Switch = ({ ...props }: SwitchProps) => {
+  return <StyledSwitch {...props} />;
+};