npm

src/providers/website-theme-provider.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from "react"
+
+const WEBSITE_THEME_KEY = "crm-website-theme"
+
+const themeClasses: Record<string, string> = {
+  spidey: "",
+}
+
+interface WebsiteThemeContextValue {
+  websiteTheme: string
+  setWebsiteTheme: (theme: string) => Promise<void>
+  loading: boolean
+}
+
+const WebsiteThemeContext = createContext<WebsiteThemeContextValue | null>(null)
+
+function applyWebsiteTheme(theme: string) {
+  const prefix = "theme-"
+  const root = document.documentElement
+  const classes = root.className.split(" ").filter((c) => !c.startsWith(prefix))
+  const cls = themeClasses[theme]
+  if (cls) {
+    classes.push(cls)
+  }
+  root.className = classes.join(" ").trim()
+}
+
+function getStoredTheme(): string | null {
+  if (typeof window === "undefined") return null
+  return localStorage.getItem(WEBSITE_THEME_KEY)
+}
+
+function storeTheme(theme: string) {
+  if (typeof window === "undefined") return
+  localStorage.setItem(WEBSITE_THEME_KEY, theme)
+}
+
+export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
+  const [websiteTheme, setWebsiteThemeState] = useState<string>("spidey")
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const stored = getStoredTheme()
+    if (stored) {
+      setWebsiteThemeState(stored)
+      applyWebsiteTheme(stored)
+      setLoading(false)
+      return
+    }
+    fetch("/api/settings/website-theme")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        const theme = data?.websiteTheme || "spidey"
+        setWebsiteThemeState(theme)
+        storeTheme(theme)
+        applyWebsiteTheme(theme)
+      })
+      .catch(() => {
+        applyWebsiteTheme("spidey")
+      })
+      .finally(() => setLoading(false))
+  }, [])
+
+  const setWebsiteTheme = useCallback(async (theme: string) => {
+    setWebsiteThemeState(theme)
+    storeTheme(theme)
+    applyWebsiteTheme(theme)
+    try {
+      await fetch("/api/settings/website-theme", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ websiteTheme: theme }),
+      })
+    } catch {
+      console.warn("Failed to persist website theme")
+    }
+  }, [])
+
+  return (
+    <WebsiteThemeContext.Provider value={{ websiteTheme, setWebsiteTheme, loading }}>
+      {children}
+    </WebsiteThemeContext.Provider>
+  )
+}
+
+export function useWebsiteTheme() {
+  const ctx = useContext(WebsiteThemeContext)
+  if (!ctx) throw new Error("useWebsiteTheme must be used within WebsiteThemeProvider")
+  return ctx
+}