adjustible archive formats + finalized settings page

pages/settings/appearance.tsx

@@ -1,34 +1,37 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 
 export default function appearance() {
   const { theme, setTheme } = useTheme();
 
-  const handleToggle = () => {
-    if (theme === "dark") {
-      setTheme("light");
-    } else {
-      setTheme("dark");
-    }
-  };
-
   return (
     <SettingsLayout>
+      <p className="mb-3 text-sm">Select Theme</p>
       <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"
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+            theme === "dark"
+              ? "dark:outline-sky-500 text-sky-500"
+              : "text-white"
+          }`}
           onClick={() => setTheme("dark")}
         >
-          <p>Dark Theme</p>
+          <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Dark Theme</p>
 
-          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-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"
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+            theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
+          }`}
           onClick={() => setTheme("light")}
         >
-          <p>Light Theme</p>
-          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+          <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Light Theme</p>
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
         </div>
       </div>
     </SettingsLayout>

pages/settings/archive.tsx

@@ -1,10 +1,88 @@
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import useAccountStore from "@/store/account";
+import { toast } from "react-hot-toast";
+import { AccountSettings } from "@/types/global";
 
 export default function archive() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+  const [user, setUser] = useState<AccountSettings>(account);
+
+  const [archiveAsScreenshot, setArchiveAsScreenshot] =
+    useState<boolean>(false);
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    setUser({
+      ...account,
+      archiveAsScreenshot,
+      archiveAsPDF,
+      archiveAsWaybackMachine,
+    });
+  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) {
+      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsPDF(account.archiveAsPDF);
+      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+    }
+  }, [account]);
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
   return (
     <SettingsLayout>
-      <div>archive</div>
+      <p>Formats to Archive webpages:</p>
+      <div className="p-3">
+        <Checkbox
+          label="Screenshot"
+          state={archiveAsScreenshot}
+          onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
+        />
+        <Checkbox
+          label="PDF"
+          state={archiveAsPDF}
+          onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+        />
+
+        <Checkbox
+          label="Archive.org Snapshot"
+          state={archiveAsWaybackMachine}
+          onClick={() => setArchiveAsWaybackMachine(!archiveAsWaybackMachine)}
+        />
+      </div>
+
+      <SubmitButton
+        onClick={submit}
+        loading={submitLoader}
+        label="Save"
+        className="mt-2 mx-auto lg:mx-0"
+      />
     </SettingsLayout>
   );
 }