Add switch component

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';

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} />;
+};