chore: settings dev mode switch

Author: mjkeaton

package-lock.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.3",

package.json

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/label.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { getItem, setItem, removeItem } from "@/utils/local-storage";
+
+type DispatchAction<T> = T | ((prevState: T) => T);
+
+export default function useLocalStorage<T>(key: string, initialValue: T) {
+  const [value, setValue] = useState(() => {
+    const data = getItem(key);
+    return (data || initialValue) as T;
+  });
+
+  function handleDispatch(action: DispatchAction<T>) {
+    if (typeof action === "function") {
+      setValue((prevState) => {
+        const newValue = (action as (prevState: T) => T)(prevState);
+        setItem(key, newValue);
+        return newValue;
+      });
+    } else {
+      setValue(action);
+      setItem(key, action);
+    }
+  }
+
+  function clearState() {
+    setValue(undefined as T);
+    removeItem(key);
+  }
+
+  return [value, handleDispatch, clearState] as const;
+}

src/hooks/use-local-storage.ts

@@ -1,6 +1,9 @@
 import { Breadcrumbs } from "@/components/Breadcrumbs"
 import { PageTitle } from "@/components/PageTitle"
+import { Label } from "@/components/ui/label"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Switch } from "@/components/ui/switch"
+import useLocalStorage from "@/hooks/use-local-storage"
 import { Suspense } from "react"
 
 function Loader() {
@@ -12,7 +15,25 @@ function Loader() {
 }
 
 function PageBody() {
-  return <></>
+  const [devMode, setDevMode] = useLocalStorage("devMode", false)
+
+  return (
+    <>
+      <div className="my-2">
+        <div className="flex items-center space-x-2">
+          <Switch
+            id="developer-mode"
+            className="cursor-pointer"
+            checked={devMode}
+            onCheckedChange={() => {
+              setDevMode((it) => !it)
+            }}
+          />
+          <Label htmlFor="developer-mode">Developer Mode</Label>
+        </div>
+      </div>
+    </>
+  )
 }
 
 export default function SettingsPage() {

src/pages/settings/SettingsPage.tsx

@@ -0,0 +1,25 @@
+
+export function setItem(key: string, value: unknown) {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+export function getItem<T>(key: string): T | undefined {
+  try {
+    const data = window.localStorage.getItem(key);
+    return data ? (JSON.parse(data) as T) : undefined;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+export function removeItem(key: string) {
+  try {
+    window.localStorage.removeItem(key);
+  } catch (err) {
+    console.error(err);
+  }
+}