npm

src/components/settings/theme-settings.tsx

@@ -6,7 +6,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { cn } from "@/lib/utils"
-import { Sun, Moon, Monitor } from "lucide-react"
+import { useWebsiteTheme } from "@/providers/website-theme-provider"
+import { Sun, Moon, Monitor, Check } from "lucide-react"
 
 const COLOR_THEME_KEY = "crm-color-theme"
 
@@ -44,8 +45,17 @@ function applyColorTheme(theme: string) {
   localStorage.setItem(COLOR_THEME_KEY, theme)
 }
 
+const websiteThemes = [
+  {
+    id: "spidey",
+    name: "Spidey",
+    description: "Current website theme",
+  },
+]
+
 export function ThemeSettings() {
   const { theme, setTheme } = useTheme()
+  const { websiteTheme, setWebsiteTheme } = useWebsiteTheme()
   const [colorTheme, setColorTheme] = useState("default")
   const [mounted, setMounted] = useState(false)
 
@@ -119,6 +129,71 @@ export function ThemeSettings() {
           </RadioGroup>
         </CardContent>
       </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Website Themes</CardTitle>
+          <CardDescription>
+            Select your website&apos;s visual theme.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+            {websiteThemes.map((wt) => {
+              const isActive = websiteTheme === wt.id
+              return (
+                <button
+                  key={wt.id}
+                  type="button"
+                  onClick={() => setWebsiteTheme(wt.id)}
+                  className={cn(
+                    "group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all",
+                    "hover:bg-accent cursor-pointer",
+                    isActive
+                      ? "border-primary bg-primary/5 shadow-sm"
+                      : "border-border hover:border-muted-foreground/30"
+                  )}
+                >
+                  {isActive && (
+                    <span className="absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
+                      <Check className="h-3 w-3" />
+                    </span>
+                  )}
+
+                  <div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-lg border border-border bg-background">
+                    <div className="flex h-full w-full">
+                      <div className="flex w-1/3 flex-col gap-0.5 bg-[#0a0a0f] p-1.5">
+                        <div className="h-1 w-full rounded-sm bg-[#1a1a24]" />
+                        <div className="h-1 w-2/3 rounded-sm bg-[#1a1a24]" />
+                        <div className="mt-auto h-1.5 w-full rounded-sm bg-[#1a1a24]" />
+                      </div>
+                      <div className="flex flex-1 flex-col">
+                        <div className="flex h-5 items-center gap-1 bg-[#CC0000] px-1.5">
+                          <div className="h-1.5 w-1.5 rounded-full bg-white/30" />
+                          <div className="h-1.5 w-1.5 rounded-full bg-white/30" />
+                          <div className="h-1.5 w-1.5 rounded-full bg-white/30" />
+                        </div>
+                        <div className="flex flex-1 items-center justify-center bg-[#141414]">
+                          <div className="h-2 w-2 rounded-full bg-[#CC0000]/40" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex w-full items-center justify-between gap-2">
+                    <span className="text-sm font-medium">{wt.name}</span>
+                    {isActive && (
+                      <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
+                        Current
+                      </span>
+                    )}
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   )
 }