refactor(settings): make toggle reusable

Toggle will be used for others settings so I extract the functionnality
from ThemeToggle.

1 files changed, 36 insertions, 0 deletions

diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
new file mode 100644
index 0000000..e14f39a
--- /dev/null
+++ b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
@@ -0,0 +1,36 @@
+import { Toggle } from '@components/Form';
+import { MoonIcon, SunIcon } from '@components/Icons';
+import Spinner from '@components/Spinner/Spinner';
+import { t } from '@lingui/macro';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const ThemeToggle = () => {
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+  const { resolvedTheme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) return <Spinner />;
+
+  const isDarkTheme = resolvedTheme === 'dark';
+
+  const updateTheme = () => {
+    setTheme(isDarkTheme ? 'light' : 'dark');
+  };
+
+  return (
+    <Toggle
+      id="dark-theme"
+      label={t`Theme:`}
+      leftChoice={<SunIcon />}
+      rightChoice={<MoonIcon />}
+      value={isDarkTheme}
+      changeHandler={updateTheme}
+    />
+  );
+};
+
+export default ThemeToggle;