settings mock

2025-11-13 00:03:33 +10:00 · 2022-12-06 18:49:38 +01:00
parent 85eefbfc12
commit 97bae407f8
7 changed files with 540 additions and 116 deletions
--- a/apps/web/components/layout.tsx
+++ b/apps/web/components/layout.tsx
@ -9,9 +9,9 @@ const user = {
    "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg",
 };
 const navigation = [
-  { name: "Dashboard", href: "#", current: true },
-  { name: "Team", href: "#", current: false },
-  { name: "Settings", href: "#" },
+  { name: "Dashboard", href: "/", current: true },
+  { name: "Team", href: "/", current: false },
+  { name: "Settings", href: "settings" },
 ];
 const userNavigation = [
  { name: "Your Profile", href: "#" },
@ -200,26 +200,11 @@ export default function Layout({ children }: any) {
          )}
        </Disclosure>

-        <div className="py-10">
-          <header>
-            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-              <h1 className="text-3xl font-bold leading-tight tracking-tight text-brown">
-                Dashboard
-              </h1>
-            </div>
-          </header>
-          <main>
-            <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-              {/* Replace with your content */}
-              <div className="px-4 py-8 sm:px-0">
-                <div className="h-96 rounded-lg border-2 border-dashed border-gray-900">
-                  {children}
-                </div>
-              </div>
-              {/* /End replace */}
-            </div>
-          </main>
-        </div>
+        <main>
+          <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
+            <div className="px-4 py-8 sm:px-0">{children}</div>
+          </div>
+        </main>
      </div>
    </>
  );
--- a/apps/web/components/settings.tsx
+++ b/apps/web/components/settings.tsx
@ -0,0 +1,454 @@
+import { Fragment, useState } from "react";
+import { Disclosure, Menu, Switch, Transition } from "@headlessui/react";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import {
+  Bars3Icon,
+  BellIcon,
+  CogIcon,
+  CreditCardIcon,
+  KeyIcon,
+  SquaresPlusIcon,
+  UserCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+const user = {
+  name: "Debbie Lewis",
+  handle: "deblewis",
+  email: "debbielewis@example.com",
+  imageUrl:
+    "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=320&h=320&q=80",
+};
+
+const subNavigation = [
+  { name: "Profile", href: "#", icon: UserCircleIcon, current: true },
+  { name: "Account", href: "#", icon: CogIcon, current: false },
+  { name: "Password", href: "#", icon: KeyIcon, current: false },
+  { name: "Notifications", href: "#", icon: BellIcon, current: false },
+  { name: "Billing", href: "#", icon: CreditCardIcon, current: false },
+  { name: "Integrations", href: "#", icon: SquaresPlusIcon, current: false },
+];
+const userNavigation = [
+  { name: "Your Profile", href: "#" },
+  { name: "Settings", href: "#" },
+  { name: "Sign out", href: "#" },
+];
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Setttings() {
+  const [availableToHire, setAvailableToHire] = useState(true);
+  const [privateAccount, setPrivateAccount] = useState(false);
+  const [allowCommenting, setAllowCommenting] = useState(true);
+  const [allowMentions, setAllowMentions] = useState(true);
+
+  return (
+    <div>
+      <div className="py-10">
+        <header>
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <h1 className="text-3xl font-bold leading-tight tracking-tight text-brown">
+              Dashboard
+            </h1>
+          </div>
+        </header>
+      </div>
+      <div className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16">
+        <div className="overflow-hidden rounded-lg bg-white shadow">
+          <div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+            <aside className="py-6 lg:col-span-3">
+              <nav className="space-y-1">
+                {subNavigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className={classNames(
+                      item.current
+                        ? "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700"
+                        : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900",
+                      "group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
+                    )}
+                    aria-current={item.current ? "page" : undefined}
+                  >
+                    <item.icon
+                      className={classNames(
+                        item.current
+                          ? "text-teal-500 group-hover:text-teal-500"
+                          : "text-gray-400 group-hover:text-gray-500",
+                        "flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+                      )}
+                      aria-hidden="true"
+                    />
+                    <span className="truncate">{item.name}</span>
+                  </a>
+                ))}
+              </nav>
+            </aside>
+
+            <form
+              className="divide-y divide-gray-200 lg:col-span-9"
+              action="#"
+              method="POST"
+            >
+              {/* Profile section */}
+              <div className="py-6 px-4 sm:p-6 lg:pb-8">
+                <div>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">
+                    Profile
+                  </h2>
+                  <p className="mt-1 text-sm text-gray-500">
+                    This information will be displayed publicly so be careful
+                    what you share.
+                  </p>
+                </div>
+
+                <div className="mt-6 flex flex-col lg:flex-row">
+                  <div className="flex-grow space-y-6">
+                    <div>
+                      <label
+                        htmlFor="username"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        Username
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
+                          workcation.com/
+                        </span>
+                        <input
+                          type="text"
+                          name="username"
+                          id="username"
+                          autoComplete="username"
+                          className="block w-full min-w-0 flex-grow rounded-none rounded-r-md border-gray-300 focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
+                          defaultValue={user.handle}
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label
+                        htmlFor="about"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        About
+                      </label>
+                      <div className="mt-1">
+                        <textarea
+                          id="about"
+                          name="about"
+                          rows={3}
+                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm"
+                          defaultValue={""}
+                        />
+                      </div>
+                      <p className="mt-2 text-sm text-gray-500">
+                        Brief description for your profile. URLs are
+                        hyperlinked.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-shrink-0 lg:flex-grow-0">
+                    <p
+                      className="text-sm font-medium text-gray-700"
+                      aria-hidden="true"
+                    >
+                      Photo
+                    </p>
+                    <div className="mt-1 lg:hidden">
+                      <div className="flex items-center">
+                        <div
+                          className="inline-block h-12 w-12 flex-shrink-0 overflow-hidden rounded-full"
+                          aria-hidden="true"
+                        >
+                          <img
+                            className="h-full w-full rounded-full"
+                            src={user.imageUrl}
+                            alt=""
+                          />
+                        </div>
+                        <div className="ml-5 rounded-md shadow-sm">
+                          <div className="group relative flex items-center justify-center rounded-md border border-gray-300 py-2 px-3 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-gray-50">
+                            <label
+                              htmlFor="mobile-user-photo"
+                              className="pointer-events-none relative text-sm font-medium leading-4 text-gray-700"
+                            >
+                              <span>Change</span>
+                              <span className="sr-only"> user photo</span>
+                            </label>
+                            <input
+                              id="mobile-user-photo"
+                              name="user-photo"
+                              type="file"
+                              className="absolute h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="relative hidden overflow-hidden rounded-full lg:block">
+                      <img
+                        className="relative h-40 w-40 rounded-full"
+                        src={user.imageUrl}
+                        alt=""
+                      />
+                      <label
+                        htmlFor="desktop-user-photo"
+                        className="absolute inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-75 text-sm font-medium text-white opacity-0 focus-within:opacity-100 hover:opacity-100"
+                      >
+                        <span>Change</span>
+                        <span className="sr-only"> user photo</span>
+                        <input
+                          type="file"
+                          id="desktop-user-photo"
+                          name="user-photo"
+                          className="absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-6 grid grid-cols-12 gap-6">
+                  <div className="col-span-12 sm:col-span-6">
+                    <label
+                      htmlFor="first-name"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      First name
+                    </label>
+                    <input
+                      type="text"
+                      name="first-name"
+                      id="first-name"
+                      autoComplete="given-name"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    />
+                  </div>
+
+                  <div className="col-span-12 sm:col-span-6">
+                    <label
+                      htmlFor="last-name"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Last name
+                    </label>
+                    <input
+                      type="text"
+                      name="last-name"
+                      id="last-name"
+                      autoComplete="family-name"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    />
+                  </div>
+
+                  <div className="col-span-12">
+                    <label
+                      htmlFor="url"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      URL
+                    </label>
+                    <input
+                      type="text"
+                      name="url"
+                      id="url"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    />
+                  </div>
+
+                  <div className="col-span-12 sm:col-span-6">
+                    <label
+                      htmlFor="company"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Company
+                    </label>
+                    <input
+                      type="text"
+                      name="company"
+                      id="company"
+                      autoComplete="organization"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Privacy section */}
+              <div className="divide-y divide-gray-200 pt-6">
+                <div className="px-4 sm:px-6">
+                  <div>
+                    <h2 className="text-lg font-medium leading-6 text-gray-900">
+                      Privacy
+                    </h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                      Ornare eu a volutpat eget vulputate. Fringilla commodo
+                      amet.
+                    </p>
+                  </div>
+                  <ul role="list" className="mt-2 divide-y divide-gray-200">
+                    <Switch.Group
+                      as="li"
+                      className="flex items-center justify-between py-4"
+                    >
+                      <div className="flex flex-col">
+                        <Switch.Label
+                          as="p"
+                          className="text-sm font-medium text-gray-900"
+                          passive
+                        >
+                          Available to hire
+                        </Switch.Label>
+                        <Switch.Description className="text-sm text-gray-500">
+                          Nulla amet tempus sit accumsan. Aliquet turpis sed sit
+                          lacinia.
+                        </Switch.Description>
+                      </div>
+                      <Switch
+                        checked={availableToHire}
+                        onChange={setAvailableToHire}
+                        className={classNames(
+                          availableToHire ? "bg-teal-500" : "bg-gray-200",
+                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                        )}
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={classNames(
+                            availableToHire ? "translate-x-5" : "translate-x-0",
+                            "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                          )}
+                        />
+                      </Switch>
+                    </Switch.Group>
+                    <Switch.Group
+                      as="li"
+                      className="flex items-center justify-between py-4"
+                    >
+                      <div className="flex flex-col">
+                        <Switch.Label
+                          as="p"
+                          className="text-sm font-medium text-gray-900"
+                          passive
+                        >
+                          Make account private
+                        </Switch.Label>
+                        <Switch.Description className="text-sm text-gray-500">
+                          Pharetra morbi dui mi mattis tellus sollicitudin
+                          cursus pharetra.
+                        </Switch.Description>
+                      </div>
+                      <Switch
+                        checked={privateAccount}
+                        onChange={setPrivateAccount}
+                        className={classNames(
+                          privateAccount ? "bg-teal-500" : "bg-gray-200",
+                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                        )}
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={classNames(
+                            privateAccount ? "translate-x-5" : "translate-x-0",
+                            "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                          )}
+                        />
+                      </Switch>
+                    </Switch.Group>
+                    <Switch.Group
+                      as="li"
+                      className="flex items-center justify-between py-4"
+                    >
+                      <div className="flex flex-col">
+                        <Switch.Label
+                          as="p"
+                          className="text-sm font-medium text-gray-900"
+                          passive
+                        >
+                          Allow commenting
+                        </Switch.Label>
+                        <Switch.Description className="text-sm text-gray-500">
+                          Integer amet, nunc hendrerit adipiscing nam. Elementum
+                          ame
+                        </Switch.Description>
+                      </div>
+                      <Switch
+                        checked={allowCommenting}
+                        onChange={setAllowCommenting}
+                        className={classNames(
+                          allowCommenting ? "bg-teal-500" : "bg-gray-200",
+                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                        )}
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={classNames(
+                            allowCommenting ? "translate-x-5" : "translate-x-0",
+                            "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                          )}
+                        />
+                      </Switch>
+                    </Switch.Group>
+                    <Switch.Group
+                      as="li"
+                      className="flex items-center justify-between py-4"
+                    >
+                      <div className="flex flex-col">
+                        <Switch.Label
+                          as="p"
+                          className="text-sm font-medium text-gray-900"
+                          passive
+                        >
+                          Allow mentions
+                        </Switch.Label>
+                        <Switch.Description className="text-sm text-gray-500">
+                          Adipiscing est venenatis enim molestie commodo eu
+                          gravid
+                        </Switch.Description>
+                      </div>
+                      <Switch
+                        checked={allowMentions}
+                        onChange={setAllowMentions}
+                        className={classNames(
+                          allowMentions ? "bg-teal-500" : "bg-gray-200",
+                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                        )}
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={classNames(
+                            allowMentions ? "translate-x-5" : "translate-x-0",
+                            "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                          )}
+                        />
+                      </Switch>
+                    </Switch.Group>
+                  </ul>
+                </div>
+                <div className="mt-4 flex justify-end py-4 px-4 sm:px-6">
+                  <button
+                    type="button"
+                    className="inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="ml-5 inline-flex justify-center rounded-md border border-transparent bg-sky-700 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                  >
+                    Save
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
@ -11,6 +11,7 @@
        "@headlessui/react": "^1.7.4",
        "@heroicons/react": "^2.0.13",
        "@prisma/client": "^4.6.1",
+        "@tailwindcss/forms": "^0.5.3",
        "@types/node": "18.11.9",
        "@types/react": "18.0.25",
        "@types/react-dom": "18.0.9",
@ -413,6 +414,17 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -570,7 +582,6 @@
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
      "dependencies": {
        "acorn": "^7.0.0",
        "acorn-walk": "^7.0.0",
@ -581,7 +592,6 @@
      "version": "7.4.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@ -593,7 +603,6 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
      "engines": {
        "node": ">=0.4.0"
      }
@ -639,7 +648,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@ -651,8 +659,7 @@
    "node_modules/arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
    },
    "node_modules/argparse": {
      "version": "2.0.1",
@ -803,7 +810,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -880,7 +886,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
      "engines": {
        "node": ">= 6"
      }
@ -919,7 +924,6 @@
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
      "funding": [
        {
          "type": "individual",
@ -946,7 +950,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@ -1007,7 +1010,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
      "bin": {
        "cssesc": "bin/cssesc"
      },
@ -1065,7 +1067,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -1074,7 +1075,6 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
      "dependencies": {
        "acorn-node": "^1.8.2",
        "defined": "^1.0.0",
@ -1090,8 +1090,7 @@
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
@ -1107,8 +1106,7 @@
    "node_modules/dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
    },
    "node_modules/doctrine": {
      "version": "3.0.0",
@ -1754,7 +1752,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@ -2034,7 +2031,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@ -2310,7 +2306,6 @@
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true,
      "engines": {
        "node": ">=10"
      }
@ -2376,6 +2371,14 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -2501,7 +2504,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -5077,7 +5079,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
      "engines": {
        "node": ">= 6"
      }
@ -5292,7 +5293,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -5301,7 +5301,6 @@
      "version": "8.4.19",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -5325,7 +5324,6 @@
      "version": "14.1.0",
      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "dev": true,
      "dependencies": {
        "postcss-value-parser": "^4.0.0",
        "read-cache": "^1.0.0",
@ -5342,7 +5340,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
      "dependencies": {
        "camelcase-css": "^2.0.1"
      },
@ -5361,7 +5358,6 @@
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
      "dependencies": {
        "lilconfig": "^2.0.5",
        "yaml": "^1.10.2"
@ -5390,7 +5386,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
-      "dev": true,
      "dependencies": {
        "postcss-selector-parser": "^6.0.10"
      },
@ -5409,7 +5404,6 @@
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@ -5421,8 +5415,7 @@
    "node_modules/postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
@ -5490,7 +5483,6 @@
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
      "engines": {
        "node": ">=10"
      },
@ -5530,7 +5522,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
      "dependencies": {
        "pify": "^2.3.0"
      }
@ -5539,7 +5530,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@ -5853,7 +5843,6 @@
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
-      "dev": true,
      "dependencies": {
        "arg": "^5.0.2",
        "chokidar": "^3.5.3",
@ -6034,8 +6023,7 @@
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "node_modules/which": {
      "version": "2.0.2",
@ -6083,7 +6071,6 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.4"
      }
@ -6097,7 +6084,6 @@
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
      "engines": {
        "node": ">= 6"
      }
@ -6328,6 +6314,14 @@
        "tslib": "^2.4.0"
      }
    },
+    "@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
    "@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -6429,7 +6423,6 @@
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
      "requires": {
        "acorn": "^7.0.0",
        "acorn-walk": "^7.0.0",
@ -6439,16 +6432,14 @@
        "acorn": {
          "version": "7.4.1",
          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
        }
      }
    },
    "acorn-walk": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
    },
    "ajv": {
      "version": "6.12.6",
@ -6478,7 +6469,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@ -6487,8 +6477,7 @@
    "arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
    },
    "argparse": {
      "version": "2.0.1",
@ -6592,8 +6581,7 @@
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
    },
    "brace-expansion": {
      "version": "1.1.11",
@ -6641,8 +6629,7 @@
    "camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
    },
    "caniuse-lite": {
      "version": "1.0.30001436",
@ -6662,7 +6649,6 @@
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@ -6678,7 +6664,6 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
          "requires": {
            "is-glob": "^4.0.1"
          }
@ -6726,8 +6711,7 @@
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
    },
    "csstype": {
      "version": "3.1.1",
@ -6764,14 +6748,12 @@
    "defined": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
    },
    "detective": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
      "requires": {
        "acorn-node": "^1.8.2",
        "defined": "^1.0.0",
@ -6781,8 +6763,7 @@
    "didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
    },
    "dir-glob": {
      "version": "3.0.1",
@ -6795,8 +6776,7 @@
    "dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
    },
    "doctrine": {
      "version": "3.0.0",
@ -7290,7 +7270,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "optional": true
    },
    "function-bind": {
@ -7479,7 +7458,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "requires": {
        "binary-extensions": "^2.0.0"
      }
@ -7666,8 +7644,7 @@
    "lilconfig": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
-      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
-      "dev": true
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
    },
    "locate-path": {
      "version": "6.0.0",
@ -7712,6 +7689,11 @@
        "picomatch": "^2.3.1"
      }
    },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
+    },
    "minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -7787,8 +7769,7 @@
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
    },
    "normalize-range": {
      "version": "0.1.2",
@ -9474,8 +9455,7 @@
    "object-hash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
    },
    "object-inspect": {
      "version": "1.12.2",
@ -9620,14 +9600,12 @@
    "pify": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
    },
    "postcss": {
      "version": "8.4.19",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
-      "dev": true,
      "requires": {
        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
@ -9638,7 +9616,6 @@
      "version": "14.1.0",
      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
-      "dev": true,
      "requires": {
        "postcss-value-parser": "^4.0.0",
        "read-cache": "^1.0.0",
@ -9649,7 +9626,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
-      "dev": true,
      "requires": {
        "camelcase-css": "^2.0.1"
      }
@ -9658,7 +9634,6 @@
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-      "dev": true,
      "requires": {
        "lilconfig": "^2.0.5",
        "yaml": "^1.10.2"
@ -9668,7 +9643,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
-      "dev": true,
      "requires": {
        "postcss-selector-parser": "^6.0.10"
      }
@ -9677,7 +9651,6 @@
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
      "requires": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@ -9686,8 +9659,7 @@
    "postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
    "prelude-ls": {
      "version": "1.2.1",
@ -9726,8 +9698,7 @@
    "quick-lru": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
    },
    "react": {
      "version": "18.2.0",
@ -9755,7 +9726,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
      "requires": {
        "pify": "^2.3.0"
      }
@ -9764,7 +9734,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "requires": {
        "picomatch": "^2.2.1"
      }
@ -9962,7 +9931,6 @@
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
-      "dev": true,
      "requires": {
        "arg": "^5.0.2",
        "chokidar": "^3.5.3",
@ -10089,8 +10057,7 @@
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "which": {
      "version": "2.0.2",
@ -10125,8 +10092,7 @@
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
    "yallist": {
      "version": "4.0.0",
@ -10136,8 +10102,7 @@
    "yaml": {
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
    },
    "yocto-queue": {
      "version": "0.1.0",
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -12,6 +12,7 @@
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
    "@prisma/client": "^4.6.1",
+    "@tailwindcss/forms": "^0.5.3",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
--- a/apps/web/pages/settings.tsx
+++ b/apps/web/pages/settings.tsx
@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import Layout from "../components/layout";
+import Settings from "../components/settings";
+import type { NextPageWithLayout } from "./_app";
+
+const SettingsPage: NextPageWithLayout = () => {
+  return <Settings></Settings>;
+};
+
+SettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return <Layout>{page}</Layout>;
+};
+
+export default SettingsPage;
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@ -1,6 +1,8 @@
-// const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require("tailwindcss/defaultTheme");

 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
+
 module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
@ -15,6 +17,8 @@ module.exports = {
      colors: {
        neon: "#37f095",
        brown: "#353434",
+        sky: colors.sky,
+        teal: colors.teal,
      },
      borderRadius: {
        "4xl": "2rem",
@ -22,6 +26,7 @@ module.exports = {
      maxWidth: {
        "2xl": "40rem",
      },
+      plugins: [require("@tailwindcss/forms")],
    },
  },
 };