Export toggle switch to new component file

Refactored for future code maintainability. Also added in default to dark theme and adjusted some styling on the toggle switch.

components/navbar.tsx

@@ -1,10 +1,10 @@
 import React, {Fragment, ReactNode, useState} from "react";
-import {useTheme} from "next-themes";
-import {Disclosure, Switch, Transition} from "@headlessui/react";
+import {Disclosure, Transition} from "@headlessui/react";
 import {XIcon, MenuIcon} from "@heroicons/react/outline"
 import Head from "next/head";
 import Link from "next/link";
 import Image from "next/image";
+import { ThemeSwitch } from "./themeSwitch";
 
 
 type Props = {
@@ -13,50 +13,6 @@ type Props = {
     description?: string
 }
 
-const ThemeSwitch = () => {
-    const {theme, setTheme} = useTheme();
-    const [enabled, setEnabled] = useState(true)
-
-    if(enabled) {
-        setTheme("dark")
-    } else {
-        setTheme("light")
-    }
-
-    return (
-        <div className="flex justify-end items-center space-x-2 mx-auto relative">
-            {/* <span className="text-lg font-extralight dark:text-black text-white">Light </span>
-            <div>
-            <input type="checkbox" name="" id="checkbox" className="hidden" />
-            <label htmlFor="checkbox" className="cursor-pointer">
-                <div className="w-9 h-5 flex items-center bg-gray-400 rounded-full p2">
-                <div className="w-4 h-4 bg-white rounded-full shadow"></div>
-                </div>
-            </label>
-            </div>
-            <span className="text-lg font-semibold dark:text-black text-white">Dark</span> */}
-            <Switch.Group>
-                <div className="flex items-center">
-                    <Switch.Label className="mr-3 dark:text-black text-white">Dark Mode</Switch.Label>
-                    <Switch
-                        checked={enabled}
-                        onChange={setEnabled}
-                        className={`${
-                            enabled ? 'bg-gray-200' : 'bg-gray-600'
-                          } relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:bg-black focus:bg-white`}
-                        >
-                            <span
-                                className={`${
-                                enabled ? 'translate-x-6' : 'translate-x-1'
-                                } inline-block w-4 h-4 transform bg-white rounded-full transition-transform`}
-                            />
-                    </Switch>
-                </div>
-            </Switch.Group>
-        </div>
-    )
-}
-
 const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
     const [isOpen, setIsOpen] = useState(false);
     return (

components/themeSwitch.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { useTheme } from "next-themes";
+import { Switch } from "@headlessui/react";
+
+export const ThemeSwitch = () => {
+    const { theme, setTheme } = useTheme();
+    const [enabled, setEnabled] = useState(true);
+
+    // Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and following translates that to a string.
+    if (enabled) {
+        setTheme("dark");
+    } else {
+        setTheme("light");
+    }
+
+    return (
+        <div className="flex justify-end items-center space-x-2 mx-auto relative">
+            <Switch.Group>
+                <div className="flex items-center">
+                    <Switch.Label className="mr-3 dark:text-black text-white">Dark Mode</Switch.Label>
+                    <Switch
+                        checked={enabled}
+                        onChange={setEnabled}
+                        className={`${enabled ? 'bg-gray-200' : 'bg-gray-400'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-black ring-white dark:focus:bg-gray-200 focus:bg-gray-400`}
+                    >
+                        <span
+                            className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-white dark:bg-black rounded-full transition-transform`} />
+                    </Switch>
+                </div>
+            </Switch.Group>
+        </div>
+    );
+};

pages/_app.tsx

@@ -5,7 +5,7 @@ import {ThemeProvider} from 'next-themes'
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <ThemeProvider attribute="class">
+      <ThemeProvider attribute="class" defaultTheme="dark">
         <Component {...pageProps} />
       </ThemeProvider>
     </>