redesigned settings page [still WIP]

2023-10-18 17:50:55 -04:00
parent f5eaee8dc0
commit 19467f243f
10 changed files with 561 additions and 249 deletions
@@ -1,10 +1,36 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import { useTheme } from "next-themes";

 export default function appearance() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
  return (
    <SettingsLayout>
-      <div>appearance</div>
+      <div className="flex gap-3 w-full">
+        <div
+          className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-black text-white"
+          onClick={() => setTheme("dark")}
+        >
+          <p>Dark Theme</p>
+
+          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+        </div>
+        <div
+          className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-white text-black"
+          onClick={() => setTheme("light")}
+        >
+          <p>Light Theme</p>
+          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+        </div>
+      </div>
    </SettingsLayout>
  );
 }