app/tag-data.json

@@ -8,6 +8,7 @@
   "github": 1,
   "guide": 5,
   "tailwind": 3,
+  "hello": 1,
   "holiday": 1,
   "canada": 1,
   "images": 1,

components/ThemeSwitch.tsx

@@ -1,7 +1,49 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
+import { Menu, RadioGroup, Transition } from '@headlessui/react'
+
+const Sun = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+const Moon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+  >
+    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+  </svg>
+)
+const Monitor = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+  >
+    <rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
+    <line x1="7" y1="17" x2="13" y2="17"></line>
+    <line x1="10" y1="13" x2="10" y2="17"></line>
+  </svg>
+)
 
 const ThemeSwitch = () => {
   const [mounted, setMounted] = useState(false)
@@ -11,29 +53,59 @@ const ThemeSwitch = () => {
   useEffect(() => setMounted(true), [])
 
   return (
-    <button
-      aria-label="Toggle Dark Mode"
-      onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        className="h-6 w-6 text-gray-900 dark:text-gray-100"
-      >
-        {mounted ? (
-          theme === 'dark' || resolvedTheme === 'dark' ? (
-            <path
-              fillRule="evenodd"
-              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-              clipRule="evenodd"
-            />
-          ) : (
-            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-          )
-        ) : null}
-      </svg>
-    </button>
+    <div className="mr-5">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+            <RadioGroup value={theme} onChange={setTheme}>
+              <div className="p-1">
+                <RadioGroup.Option value="light">
+                  <Menu.Item>
+                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                      <div className="mr-2">
+                        <Sun />
+                      </div>
+                      Light
+                    </button>
+                  </Menu.Item>
+                </RadioGroup.Option>
+                <RadioGroup.Option value="dark">
+                  <Menu.Item>
+                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                      <div className="mr-2">
+                        <Moon />
+                      </div>
+                      Dark
+                    </button>
+                  </Menu.Item>
+                </RadioGroup.Option>
+                <RadioGroup.Option value="system">
+                  <Menu.Item>
+                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
+                      <div className="mr-2">
+                        <Monitor />
+                      </div>
+                      System
+                    </button>
+                  </Menu.Item>
+                </RadioGroup.Option>
+              </div>
+            </RadioGroup>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
   )
 }
 

package.json

@@ -12,6 +12,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@headlessui/react": "1.7.19",
     "@next/bundle-analyzer": "14.2.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",