further restructuring

src/components/toggles/color.jsx

@@ -0,0 +1,81 @@
+import { useContext, Fragment } from "react";
+import { IoColorPalette } from "react-icons/io5";
+import { Popover, Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+import { ColorContext } from "utils/contexts/color";
+
+const colors = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+  "red",
+  "white",
+];
+
+export default function ColorToggle() {
+  const { color: active, setColor } = useContext(ColorContext);
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <div className="w-full self-center">
+      <Popover className="relative flex items-center">
+        <Popover.Button className="outline-none">
+          <IoColorPalette
+            className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
+            aria-hidden="true"
+          />
+          <span className="sr-only">Change color</span>
+        </Popover.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute -top-[75px] left-0">
+            <div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 w-[85vw] sm:w-full">
+              <div className="relative grid gap-2 p-2 grid-cols-11 bg-white/50 dark:bg-white/10 shadow-black/10 dark:shadow-black/20 rounded-md shadow-md">
+                {colors.map((color) => (
+                  <button type="button" onClick={() => setColor(color)} key={color}>
+                    <div
+                      title={color}
+                      className={classNames(
+                        active === color ? "border-2" : "border-0",
+                        `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`
+                      )}
+                    />
+                    <span className="sr-only">{color}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </Popover.Panel>
+        </Transition>
+      </Popover>
+    </div>
+  );
+}

src/components/toggles/revalidate.jsx

@@ -0,0 +1,17 @@
+import { MdRefresh } from "react-icons/md";
+
+export default function Revalidate() {
+  const revalidate = () => {
+    fetch("/api/revalidate").then((res) => {
+      if (res.ok) {
+        window.location.reload();
+      }
+    });
+  };
+
+  return (
+    <div className="rounded-full flex align-middle self-center mr-3">
+      <MdRefresh onClick={() => revalidate()} className="text-theme-800 dark:text-theme-200 w-6 h-6 cursor-pointer" />
+    </div>
+  );
+}

src/components/toggles/theme.jsx

@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import { MdDarkMode, MdLightMode, MdToggleOff, MdToggleOn } from "react-icons/md";
+
+import { ThemeContext } from "utils/contexts/theme";
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  if (!theme) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-full flex self-end">
+      <MdLightMode className="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5" />
+      {theme === "dark" ? (
+        <MdToggleOn
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          className="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer"
+        />
+      ) : (
+        <MdToggleOff
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          className="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer"
+        />
+      )}
+      <MdDarkMode className="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5" />
+    </div>
+  );
+}