Move theme toggle to settings.

2025-12-17 06:24:24 +01:00 · 2022-12-29 01:17:06 +01:00
parent d4b76974a5
commit 09517f9b0e
2 changed files with 115 additions and 101 deletions
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -5,53 +5,6 @@ import Link from "next/link"
 import { useTheme } from "next-themes"

 export function Header() {
-  const { theme, systemTheme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const renderThemeToggle = () => {
-    if (!mounted) return null
-
-    const currentTheme = theme === "system" ? systemTheme : theme
-
-    if (currentTheme === "dark") {
-      return (
-        <button onClick={() => setTheme("light")} className="icon-hover">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <title>Theme toggle</title>
-            <path
-              fillRule="evenodd"
-              d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button>
-      )
-    } else {
-      return (
-        <button onClick={() => setTheme("dark")} className="icon-hover">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <title>Theme toggle</title>
-            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
-          </svg>
-        </button>
-      )
-    }
-  }
-
  return (
    <header className="mb-5 p-4">
      <div className="container mx-auto flex justify-between items-center">
@@ -65,14 +18,13 @@ export function Header() {
        >FAQ
        </Link> */}
          <a href="https://github.com/vilm3r/sendstr-web">
-            <DiGithubBadge className="inline text-3xl icon-hover" title="Github" />
+            <DiGithubBadge className="inline text-3xl primary-hover" title="Github" />
          </a>
          <Link href="/settings">
            <div className="cursor-pointer">
-              <MdSettings className="inline text-2xl icon-hover" title="Settings" />
+              <MdSettings className="inline text-2xl primary-hover" title="Settings" />
            </div>
          </Link>
-          {renderThemeToggle()}
        </div>
      </div>
    </header>
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -1,4 +1,4 @@
-import { createRef, useState } from "react"
+import { createRef, useEffect, useState } from "react"
 import { Button } from "../../components/button"
 import { Card } from "../../components/card"
 import { Header } from "../../components/header"
@@ -13,6 +13,7 @@ import { Input } from "../../components/input"
 import { MdDelete } from "react-icons/md"
 import { Toggle } from "../../components/toggle"
 import Head from "next/head"
+import { useTheme } from "next-themes"

 type SettingsState = {
  relays: SettingsRelay[]
@@ -23,6 +24,62 @@ export default function Settings() {
    relays: typeof window !== "undefined" ? getRelays() : [],
  })
  const newPool = createRef<HTMLInputElement>()
+  const { theme, systemTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const ThemeToggle = () => {
+    if (!mounted) return null
+
+    let content: JSX.Element
+    const currentTheme = theme === "system" ? systemTheme : theme
+    const isDark = currentTheme === "dark"
+
+    const toggleHandler = () => setTheme(isDark ? "light" : "dark")
+
+    if (isDark) {
+      content = (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-6 h-6"
+        >
+          <title>Theme toggle</title>
+          <path
+            fillRule="evenodd"
+            d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+            clipRule="evenodd"
+          />
+        </svg>
+      )
+    } else {
+      content = (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-6 h-6"
+        >
+          <title>Theme toggle</title>
+          <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+        </svg>
+      )
+    }
+
+    return (
+      <div onClick={toggleHandler} className="cursor-pointer">
+        <h2 className="text-2xl pb-5">Light mode</h2>
+        <div className="flex justify-between primary-hover">
+          <p className="lg:text-lg">Toggle</p>
+          {content}
+        </div>
+      </div>
+    )
+  }

  return (
    <>
@@ -53,61 +110,66 @@ export default function Settings() {
        />
        <meta property="twitter:image" content="/favicon-16x16.png" />
      </Head>
-      <div className="bg-custom-green-dark min-h-screen">
+      <div className="min-h-screen">
        <div className="p-5">
          <div className="max-w-[80rem] mx-auto">
            <Header />
            <main className="max-w-[64rem] m-auto">
              <div className="max-w-[30rem] m-auto p-10">
-                <h2 className="text-2xl pb-5">Relays</h2>
-                <ul>
-                  {settings.relays.map((relay) => (
-                    <li key={relay.url}>
-                      <div className="m-auto flex items-center pb-3">
-                        <Toggle
-                          checked={relay.enabled}
-                          onChange={() => {
-                            toggleRelay(relay.url)
-                            setSettings({
-                              ...settings,
-                              relays: getRelays(),
-                            })
-                          }}
-                        />
-                        <label className="lg:text-lg flex-grow text-center p-2 truncate">
-                          {relay.url}
-                        </label>
-                        <button
-                          onClick={() => {
-                            removeRelay(relay.url)
-                            setSettings({
-                              ...settings,
-                              relays: getRelays(),
-                            })
-                          }}
-                        >
-                          <MdDelete className="text-2xl" />
-                        </button>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-                <Input className="pt-5" ref={newPool} placeholder="Relay url" />
-                <Button
-                  className="pt-5"
-                  onClick={() => {
-                    addRelay({
-                      url: newPool?.current?.value || "",
-                      enabled: true,
-                    })
-                    setSettings({
-                      ...settings,
-                      relays: getRelays(),
-                    })
-                  }}
-                >
-                  Add Relay
-                </Button>
+                <div className="pb-10">
+                  <h2 className="text-2xl pb-5">Relays</h2>
+                  <ul>
+                    {settings.relays.map((relay) => (
+                      <li key={relay.url}>
+                        <div className="m-auto flex items-center pb-3">
+                          <Toggle
+                            checked={relay.enabled}
+                            onChange={() => {
+                              toggleRelay(relay.url)
+                              setSettings({
+                                ...settings,
+                                relays: getRelays(),
+                              })
+                            }}
+                          />
+                          <label className="lg:text-lg flex-grow text-center p-2 truncate">
+                            {relay.url}
+                          </label>
+                          <button
+                            onClick={() => {
+                              removeRelay(relay.url)
+                              setSettings({
+                                ...settings,
+                                relays: getRelays(),
+                              })
+                            }}
+                          >
+                            <MdDelete className="text-2xl" />
+                          </button>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                  <Input className="pt-5" ref={newPool} placeholder="Relay url" />
+                  <Button
+                    className="pt-5"
+                    onClick={() => {
+                      addRelay({
+                        url: newPool?.current?.value || "",
+                        enabled: true,
+                      })
+                      setSettings({
+                        ...settings,
+                        relays: getRelays(),
+                      })
+                    }}
+                  >
+                    Add Relay
+                  </Button>
+                </div>
+                <div className="pt-10">
+                  <ThemeToggle />
+                </div>
              </div>
            </main>
          </div>