feat: build dashboard lead funnel

components/dashboard-theme.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type DashboardTheme = "light" | "dark";
+
+type DashboardThemeContextValue = {
+  theme: DashboardTheme;
+  toggleTheme: () => void;
+};
+
+const storageKey = "webdev-dashboard-theme";
+
+const DashboardThemeContext =
+  createContext<DashboardThemeContextValue | null>(null);
+
+export function DashboardThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<DashboardTheme>(() => {
+    if (typeof window === "undefined") {
+      return "light";
+    }
+
+    const storedTheme = window.localStorage.getItem(storageKey);
+
+    if (storedTheme === "dark" || storedTheme === "light") {
+      return storedTheme;
+    }
+
+    return "light";
+  });
+
+  const value = useMemo<DashboardThemeContextValue>(
+    () => ({
+      theme,
+      toggleTheme: () => {
+        setTheme((currentTheme) => {
+          const nextTheme = currentTheme === "dark" ? "light" : "dark";
+          window.localStorage.setItem(storageKey, nextTheme);
+          return nextTheme;
+        });
+      },
+    }),
+    [theme],
+  );
+
+  return (
+    <DashboardThemeContext.Provider value={value}>
+      <div
+        suppressHydrationWarning
+        className={cn(
+          "min-h-dvh bg-background text-foreground md:flex",
+          theme === "dark" && "dark",
+        )}
+      >
+        {children}
+      </div>
+    </DashboardThemeContext.Provider>
+  );
+}
+
+export function DashboardThemeToggle() {
+  const context = useContext(DashboardThemeContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const isDark = context.theme === "dark";
+  const Icon = isDark ? Sun : Moon;
+
+  return (
+    <Button
+      className="w-full justify-start"
+      variant="ghost"
+      onClick={context.toggleTheme}
+      aria-pressed={isDark}
+    >
+      <Icon />
+      {isDark ? "Hellmodus" : "Dunkelmodus"}
+    </Button>
+  );
+}