🏵️ Feat: Theme Settings UI

Author: MidHunterX

app/page.tsx

@@ -11,6 +11,7 @@ import Contact from "@/world/contact";
 import { useAutoHideNav } from "@/world/settings";
 import { ToggleAutoHideNav } from "@/world/settings/toggleAutoHideNav";
 import Settings from "@/world/settings";
+import { ThemeSwitchRadio } from "@/world/settings/toggleThemes";
 
 export default function Application() {
   useBlobity({
@@ -46,6 +47,7 @@ export default function Application() {
           toggleAutoHideNav={toggleAutoHideNav}
           isAutoHideNavEnabled={isAutoHideNavEnabled}
         />
+        <ThemeSwitchRadio />
       </Settings>
       <Projects />
       <Skills />

world/navigation.tsx

@@ -3,7 +3,6 @@ import Link from "next/link";
 import { ReactNode } from "react";
 import { useState, useEffect } from "react";
 import { smoothScroll } from "@/world/smoothScroll";
-import { ThemeSwitchNav } from "@/world/themeswitch";
 
 /* ===================== SMOOTH TRAVEL TO DESTINATION ===================== */
 
@@ -52,7 +51,7 @@ export default function FastTravel({ isAutoHideEnabled }: FastTravelProps) {
 
   return (
     <nav
-      className={`fixed bottom-0 sm:bottom-6 left-0 right-0 mx-auto flex items-center justify-center gap-1 sm:rounded-xl border-0 sm:border-2 border-gray-500 bg-neutral-950 px-1 py-1 sm:w-[383.3px] md:p-2 lg:w-fit z-10 transition-transform duration-500 ${ isVisible ? "translate-y-0" : "translate-y-20" }`}
+      className={`fixed bottom-0 sm:bottom-6 left-0 right-0 mx-auto flex items-center justify-center gap-1 sm:rounded-xl border-0 sm:border-2 border-gray-500 bg-neutral-950 px-1 py-1 sm:w-[383.3px] md:p-2 lg:w-fit z-10 transition-transform duration-500 ${isVisible ? "translate-y-0" : "translate-y-20"}`}
     >
       <NavItem href="#home" label="Fast Travel to Home">
         Home
@@ -69,8 +68,6 @@ export default function FastTravel({ isAutoHideEnabled }: FastTravelProps) {
       <NavItem href="#contact" label="Fast Travel to Postal Service">
         Contact
       </NavItem>
-
-      <ThemeSwitchNav />
     </nav>
   );
 }

world/settings.tsx

@@ -60,11 +60,11 @@ export default function Settings({ children }: SettingsProps) {
     <section id="settings">
       <button
         onClick={open}
-        className="absolute sm:fixed right-5 top-5"
+        className="absolute sm:fixed right-3 top-3 sm:right-5 sm:top-5"
         data-blobity-magnetic="false"
       >
-        <h3 className="m-0 p-0 text-gray-500">
-          <FontAwesomeIcon icon={faGear} />
+        <h3 className="m-0 p-0 text-gray-400">
+          <FontAwesomeIcon className="p-2" icon={faGear} />
         </h3>
       </button>
 
@@ -91,7 +91,7 @@ export default function Settings({ children }: SettingsProps) {
             <div className="flex min-h-full items-center justify-center p-4">
               <DialogPanel
                 transition
-                className="w-full max-w-md rounded-xl bg-white/70 dark:bg-white/20 p-6 backdrop-blur-xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0"
+                className="w-full max-w-md rounded-xl bg-white/70 dark:bg-white/20 p-6 backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0"
               >
                 <Button
                   className="float-right"
@@ -102,7 +102,10 @@ export default function Settings({ children }: SettingsProps) {
                     <FontAwesomeIcon icon={faXmark} />
                   </h3>
                 </Button>
-                <h3 className="mb-8">Portfolio Settings</h3>
+                <h3 className="mb-8">
+                  <FontAwesomeIcon className="me-2" icon={faGear} />
+                  Settings
+                </h3>
                 {children}
               </DialogPanel>
             </div>

world/settings/toggleAutoHideNav.tsx

@@ -15,7 +15,7 @@ export const ToggleAutoHideNav = ({
         checked={isAutoHideEnabled}
         onChange={toggleAutoHide}
         className="group inline-flex h-6 w-11 items-center rounded-full
-        bg-gray-400 dark:bg-gray-500 transition data-[checked]:bg-blue-600 dark:data-[checked]:bg-yellow-200"
+        bg-gray-600 dark:bg-gray-400 transition data-[checked]:bg-blue-600 dark:data-[checked]:bg-yellow-200"
         data-blobity-magnetic="false"
         data-blobity-radius="15"
       >

world/themeswitch.tsx renamed to world/settings/toggleThemes.tsx

@@ -56,3 +56,52 @@ export const ThemeSwitchNav = () => {
     </button>
   );
 };
+
+import { Radio, RadioGroup } from "@headlessui/react";
+import { faCircleCheck } from "@fortawesome/free-solid-svg-icons";
+
+const plans = [
+  {
+    value: "system",
+    name: "System Theme",
+    desc: "Based on your system/browser settings",
+  },
+  { value: "light", name: "Light Mode", desc: "Prepare to blow your eyes out" },
+  { value: "dark", name: "Dark Mode", desc: "Finally, comfort in the dark" },
+];
+
+export function ThemeSwitchRadio() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  return (
+    <RadioGroup value={theme} onChange={(e) => setTheme(e)} aria-label="Themes">
+      <h5 className="mt-4">Themes</h5>
+      {plans.map((plan) => (
+        <Radio
+          key={plan.value}
+          value={plan.value}
+          className="group relative flex cursor-pointer rounded-lg bg-white/5 my-2 py-3 px-5 text-white shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/20"
+        >
+          <div className="flex w-full items-center justify-between">
+            <div>
+              <p className="m-0 font-bold group-data-[checked]:text-blue-800 dark:group-data-[checked]:text-yellow-200">
+                {plan.name}
+              </p>
+              <p className="text-xs m-0">{plan.desc}</p>
+            </div>
+            <FontAwesomeIcon
+              icon={faCircleCheck}
+              className="size-6 text-blue-800 dark:text-yellow-200 opacity-0 transition group-data-[checked]:opacity-100"
+            />
+          </div>
+        </Radio>
+      ))}
+    </RadioGroup>
+  );
+}