114 lines
4.2 KiB
TypeScript
114 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { Monitor, Moon, Sun } from "lucide-react";
|
|
import { Button, Card, CardContent, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
|
|
import { toast } from "poyraz-ui/molecules";
|
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
|
import { applyColorMode } from "@/components/theme/color-mode-sync";
|
|
import { isColorMode, type ColorMode } from "@/lib/color-mode";
|
|
import { savePortalColorModeAction } from "./actions";
|
|
|
|
const themeOptions = [
|
|
{ value: "light", icon: Sun },
|
|
{ value: "dark", icon: Moon },
|
|
{ value: "system", icon: Monitor },
|
|
] as const;
|
|
|
|
export function PortalAppearanceForm({
|
|
initialColorMode,
|
|
}: {
|
|
initialColorMode: ColorMode;
|
|
}) {
|
|
const t = useTranslations();
|
|
const [colorMode, setColorMode] = useState(initialColorMode);
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
function changeColorMode(value: string) {
|
|
if (!isColorMode(value) || value === colorMode || pending) return;
|
|
const previous = colorMode;
|
|
setColorMode(value);
|
|
applyColorMode(value);
|
|
startTransition(async () => {
|
|
const result = await savePortalColorModeAction(value);
|
|
if (result.errorKey) {
|
|
setColorMode(previous);
|
|
applyColorMode(previous);
|
|
toast.error(t(result.errorKey));
|
|
return;
|
|
}
|
|
toast.success(t("settings.appearance.messages.themeSaved"));
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="space-y-6 p-6 sm:p-8">
|
|
<div className="space-y-1.5">
|
|
<h2 className="text-xl font-semibold text-foreground">
|
|
{t("settings.portal.appearance.title")}
|
|
</h2>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
|
{t("settings.portal.appearance.description")}
|
|
</p>
|
|
</div>
|
|
|
|
<RadioGroup
|
|
value={colorMode}
|
|
onValueChange={changeColorMode}
|
|
disabled={pending}
|
|
aria-label={t("settings.appearance.theme.ariaLabel")}
|
|
className="grid gap-3 sm:grid-cols-3"
|
|
>
|
|
{themeOptions.map((option) => {
|
|
const Icon = option.icon;
|
|
|
|
const selected = colorMode === option.value;
|
|
|
|
return (
|
|
<Label
|
|
key={option.value}
|
|
htmlFor={`portal-color-mode-${option.value}`}
|
|
className={`flex min-h-36 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 transition-colors ${
|
|
selected
|
|
? "border-primary bg-primary/5 ring-1 ring-primary"
|
|
: "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
|
|
<Icon className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<RadioGroupItem
|
|
id={`portal-color-mode-${option.value}`}
|
|
value={option.value}
|
|
aria-label={t(`settings.appearance.theme.${option.value}.label`)}
|
|
/>
|
|
</div>
|
|
<span className="space-y-1">
|
|
<span className="block text-sm font-semibold text-foreground">
|
|
{t(`settings.appearance.theme.${option.value}.label`)}
|
|
</span>
|
|
<span className="block text-xs font-normal text-muted-foreground">
|
|
{t(`settings.appearance.theme.${option.value}.description`)}
|
|
</span>
|
|
</span>
|
|
</Label>
|
|
);
|
|
})}
|
|
</RadioGroup>
|
|
|
|
<div className="rounded-md border border-dashed border-border bg-muted/20 p-4 text-sm text-muted-foreground">
|
|
{t("settings.portal.appearance.brandingNotice")}
|
|
</div>
|
|
|
|
<div className="flex justify-end border-t border-border pt-6">
|
|
<Button type="button" variant="secondary" effect="shine" loading={pending} disabled>
|
|
{t("settings.portal.appearance.autoSave")}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|