dokploy/apps/dokploy/components/dashboard/settings/appearance-form.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import useLocale from "@/utils/hooks/use-locale";
import { useTranslation } from "next-i18next";
import { useTheme } from "next-themes";
import { useEffect } from "react";
import { toast } from "sonner";

const appearanceFormSchema = z.object({
	theme: z.enum(["light", "dark", "system"], {
		required_error: "Please select a theme.",
	}),
	language: z.enum(
		[
			"en",
			"pl",
			"ru",
			"fr",
			"de",
			"tr",
			"zh-Hant",
			"kz",
			"zh-Hans",
			"fa",
			"ko",
			"pt-br",
		],
		{
			required_error: "Please select a language.",
		},
	),
});

type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;

// This can come from your database or API.
const defaultValues: Partial<AppearanceFormValues> = {
	theme: "system",
	language: "en",
};

export function AppearanceForm() {
	const { setTheme, theme } = useTheme();
	const { locale, setLocale } = useLocale();
	const { t } = useTranslation("settings");

	const form = useForm<AppearanceFormValues>({
		resolver: zodResolver(appearanceFormSchema),
		defaultValues,
	});

	useEffect(() => {
		form.reset({
			theme: (theme ?? "system") as AppearanceFormValues["theme"],
			language: locale,
		});
	}, [form, theme, locale]);
	function onSubmit(data: AppearanceFormValues) {
		setTheme(data.theme);
		setLocale(data.language);
		toast.success("Preferences Updated");
	}

	return (
		<Card className="bg-transparent">
			<CardHeader>
				<CardTitle className="text-xl">
					{t("settings.appearance.title")}
				</CardTitle>
				<CardDescription>
					{t("settings.appearance.description")}
				</CardDescription>
			</CardHeader>
			<CardContent className="space-y-2">
				<Form {...form}>
					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
						<FormField
							control={form.control}
							name="theme"
							defaultValue={form.control._defaultValues.theme}
							render={({ field }) => {
								return (
									<FormItem className="space-y-1 ">
										<FormLabel>{t("settings.appearance.theme")}</FormLabel>
										<FormDescription>
											{t("settings.appearance.themeDescription")}
										</FormDescription>
										<FormMessage />
										<RadioGroup
											onValueChange={field.onChange}
											defaultValue={field.value}
											value={field.value}
											className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
										>
											<FormItem>
												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
													<FormControl>
														<RadioGroupItem value="light" className="sr-only" />
													</FormControl>
													<div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
														<img src="/images/theme-light.svg" alt="light" />
													</div>
													<span className="block w-full p-2 text-center font-normal">
														{t("settings.appearance.themes.light")}
													</span>
												</FormLabel>
											</FormItem>
											<FormItem>
												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
													<FormControl>
														<RadioGroupItem value="dark" className="sr-only" />
													</FormControl>
													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
														<img src="/images/theme-dark.svg" alt="dark" />
													</div>
													<span className="block w-full p-2 text-center font-normal">
														{t("settings.appearance.themes.dark")}
													</span>
												</FormLabel>
											</FormItem>
											<FormItem>
												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
													<FormControl>
														<RadioGroupItem
															value="system"
															className="sr-only"
														/>
													</FormControl>
													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
														<img src="/images/theme-system.svg" alt="system" />
													</div>
													<span className="block w-full p-2 text-center font-normal">
														{t("settings.appearance.themes.system")}
													</span>
												</FormLabel>
											</FormItem>
										</RadioGroup>
									</FormItem>
								);
							}}
						/>

						<FormField
							control={form.control}
							name="language"
							defaultValue={form.control._defaultValues.language}
							render={({ field }) => {
								return (
									<FormItem className="space-y-1">
										<FormLabel>{t("settings.appearance.language")}</FormLabel>
										<FormDescription>
											{t("settings.appearance.languageDescription")}
										</FormDescription>
										<FormMessage />
										<Select
											onValueChange={field.onChange}
											defaultValue={field.value}
											value={field.value}
										>
											<SelectTrigger>
												<SelectValue placeholder="No preset selected" />
											</SelectTrigger>
											<SelectContent>
												{[
													{ label: "English", value: "en" },
													{ label: "Polski", value: "pl" },
													{ label: "Русский", value: "ru" },
													{ label: "Français", value: "fr" },
													{ label: "Deutsch", value: "de" },
													{ label: "繁體中文", value: "zh-Hant" },
													{ label: "简体中文", value: "zh-Hans" },
													{ label: "Türkçe", value: "tr" },
													{ label: "Қазақ", value: "tr" },
													{ label: "Kazakh", value: "kz" },
													{ label: "Persian", value: "fa" },
													{ label: "한국어", value: "ko" },
													{ label: "Português", value: "pt-br" },
												].map((preset) => (
													<SelectItem key={preset.label} value={preset.value}>
														{preset.label}
													</SelectItem>
												))}
											</SelectContent>
										</Select>
									</FormItem>
								);
							}}
						/>

						<Button type="submit">{t("settings.common.save")}</Button>
					</form>
				</Form>
			</CardContent>
		</Card>
	);
}