added apikey model

pages/settings/account.tsx

@@ -151,6 +151,10 @@ export default function Account() {
 
   return (
     <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Account Settings</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
       <div className="flex flex-col gap-10">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">

pages/settings/api.tsx

@@ -0,0 +1,78 @@
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React, { useEffect, useState } from "react";
+import useAccountStore from "@/store/account";
+import { toast } from "react-hot-toast";
+import { AccountSettings } from "@/types/global";
+import TextInput from "@/components/TextInput";
+
+export default function Api() {
+  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>
+      <p className="capitalize text-3xl font-thin inline">API Keys</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+      <div className="flex flex-col gap-3">
+        <div className="badge bg-yellow-300 text-black">
+          Status: Under Development
+        </div>
+
+        <p>This page will be for creating and managing your API keys.</p>
+
+        <p>
+          For now, you can <i>temporarily</i> use your{" "}
+          <code className="text-xs whitespace-nowrap bg-gray-500/40 rounded-md px-2 py-1">
+            next-auth.session-token
+          </code>{" "}
+          in your browser cookies as the API key for your integrations.
+        </p>
+      </div>
+    </SettingsLayout>
+  );
+}

pages/settings/appearance.tsx

@@ -68,6 +68,10 @@ export default function Appearance() {
 
   return (
     <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Appearance</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
       <div className="flex flex-col gap-10">
         <div>
           <p className="mb-3">Select Theme</p>

pages/settings/archive.tsx

@@ -57,6 +57,10 @@ export default function Archive() {
 
   return (
     <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Archive Settings</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
       <p>Formats to Archive webpages:</p>
       <div className="p-3">
         <Checkbox

pages/settings/billing.tsx

@@ -11,9 +11,13 @@ export default function Billing() {
 
   return (
     <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md text-black dark:text-white">
-          To manage/cancel your subsciption, visit the{" "}
+          To manage/cancel your subscription, visit the{" "}
           <a
             href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
             className="underline"

pages/settings/password.tsx

@@ -45,6 +45,10 @@ export default function Password() {
 
   return (
     <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Change Password</p>
+
+      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
       <p className="mb-3">
         To change your password, please fill out the following. Your password
         should be at least 8 characters.