Theme

1"use client"
2 
3import {
4  ThemePreviewDark,
5  ThemePreviewLight,
6  ThemePreviewSystem,
7  useAuthPlugin
8} from "@better-auth-ui/react"
9import { Monitor, Moon, Sun } from "lucide-react"
10import { useEffect, useState } from "react"
11 
12import { Card, CardContent } from "@/components/ui/card"
13import {
14  Field,
15  FieldContent,
16  FieldLabel,
17  FieldTitle
18} from "@/components/ui/field"
19import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
20import { themePlugin } from "@/lib/auth/theme-plugin"
21import { cn } from "@/lib/utils"
22 
23export type AppearanceProps = {
24  className?: string
25}
26 
27/**
28 * Renders a theme selector card with visual theme previews.
29 *
30 * Displays a card containing radio buttons for selecting between system, light,
31 * and dark themes. Each option shows a visual preview of the theme.
32 *
33 * @param className - Optional additional CSS class names for the card container.
34 * @returns A JSX element containing the theme selector card.
35 */
36export function Appearance({ className }: AppearanceProps) {
37  const { useTheme, localization } = useAuthPlugin(themePlugin)
38  const { theme, setTheme, themes = [] } = useTheme()
39 
40  const [isMounted, setIsMounted] = useState(false)
41  useEffect(() => setIsMounted(true), [])
42 
43  return (
44    <div>
45      <h2 className="text-sm font-semibold mb-3">{localization.appearance}</h2>
46 
47      <Card className={cn(className)}>
48        <CardContent>
49          <Field>
50            <FieldLabel>{localization.theme}</FieldLabel>
51 
52            <RadioGroup
53              value={isMounted ? theme : ""}
54              onValueChange={setTheme}
55              className="grid gap-3 grid-cols-2 sm:grid-cols-3"
56              disabled={!isMounted || !theme}
57            >
58              {themes.includes("system") && (
59                <FieldLabel htmlFor="system">
60                  <Field orientation="horizontal">
61                    <FieldContent className="gap-2">
62                      <div className="flex items-center gap-2 justify-between">
63                        <FieldTitle>
64                          <Monitor className="size-4 text-muted-foreground" />
65 
66                          {localization.system}
67                        </FieldTitle>
68 
69                        <RadioGroupItem value="system" id="system" />
70                      </div>
71 
72                      <ThemePreviewSystem className="w-full" />
73                    </FieldContent>
74                  </Field>
75                </FieldLabel>
76              )}
77 
78// … truncated