Update toggle theme UI (#533)

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@geist-ui/core": "^2.3.8",
+    "@headlessui/react": "^1.7.15",
     "@phosphor-icons/react": "^2.0.8",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.3",

src/app/(blog)/components/header/index.tsx

@@ -45,7 +45,7 @@ export function Header() {
   }) => (
     <Link
       href={path}
-      className="rounded-lg p-1 text-neutral-700 hover:bg-neutral-200/50 hover:text-neutral-900 dark:text-neutral-300 hover:dark:bg-neutral-900 dark:hover:text-neutral-100"
+      className="rounded-lg p-2 leading-none text-neutral-700 hover:bg-neutral-200/50 hover:text-neutral-900 dark:text-neutral-300 hover:dark:bg-neutral-900 dark:hover:text-neutral-100"
     >
       {name}
     </Link>

src/app/(blog)/components/header/toggle-theme.tsx

@@ -1,32 +1,57 @@
 'use client'
 
+import { Menu } from '@headlessui/react'
+import { Moon, Sun, Desktop } from '@phosphor-icons/react'
 import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-import { FiMoon, FiSun } from 'react-icons/fi'
 
-export const ToggleTheme = () => {
-  const [mounted, setMounted] = useState(false)
-
-  const { setTheme, resolvedTheme } = useTheme()
-
-  const isLight = resolvedTheme === 'light'
-  const oppositeTheme = isLight ? 'dark' : 'light'
-
-  const toggleTheme = () => setTheme(oppositeTheme)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) return null
-
-  return (
-    <button onClick={toggleTheme} className="p-1">
-      {isLight ? (
-        <FiMoon className="text-xl" title="Dark mode" />
-      ) : (
-        <FiSun className="text-xl" title="Light mode" />
+export function ToggleTheme() {
+  const { setTheme, theme: currTheme } = useTheme()
+
+  const SelectTheme = ({ theme }: { theme: 'light' | 'dark' | 'system' }) => (
+    <button
+      onClick={() => setTheme(theme)}
+      className={`flex w-full items-center justify-start gap-4 rounded-xl p-2 text-lg leading-none hover:bg-neutral-100 hover:dark:bg-neutral-1000 ${
+        currTheme === theme && 'font-bold'
+      }`}
+    >
+      {theme === 'light' && (
+        <>
+          <Sun weight={currTheme === theme ? 'duotone' : 'regular'} />
+          <span>Light</span>
+        </>
+      )}
+      {theme === 'dark' && (
+        <>
+          <Moon weight={currTheme === theme ? 'duotone' : 'regular'} />
+          <span>Dark</span>
+        </>
+      )}
+      {theme === 'system' && (
+        <>
+          <Desktop weight={currTheme === theme ? 'duotone' : 'regular'} />
+          <span>System</span>
+        </>
       )}
     </button>
   )
+
+  return (
+    <Menu as="div" className="relative inline-flex items-center">
+      <Menu.Button>
+        {currTheme === 'light' && <Sun className="text-xl" />}
+        {currTheme === 'dark' && <Moon className="text-xl" />}
+        {currTheme === 'system' && <Desktop className="text-xl" />}
+      </Menu.Button>
+      <Menu.Items
+        as="div"
+        className="absolute right-0 top-10 origin-top-right animate-fade-down rounded-xl bg-neutral-50 p-1 outline-none animate-duration-300 dark:bg-neutral-900"
+      >
+        <Menu.Item as="div">
+          <SelectTheme theme="light" />
+          <SelectTheme theme="dark" />
+          <SelectTheme theme="system" />
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
+  )
 }