64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { AppCard } from "@/components/ui/app-card";
|
|
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import type { MarqueeSettings } from "@/lib/marquee-settings";
|
|
|
|
type MarqueeSettingsFormProps = {
|
|
action: (formData: FormData) => Promise<void>;
|
|
initialSettings: MarqueeSettings;
|
|
};
|
|
|
|
const localeMeta = [
|
|
{ key: "de", label: "Deutsch" },
|
|
{ key: "en", label: "English" },
|
|
{ key: "ar", label: "Arabic" },
|
|
] as const;
|
|
|
|
const rowMeta = [
|
|
{ key: "row1", label: "Row 1" },
|
|
{ key: "row2", label: "Row 2" },
|
|
{ key: "row3", label: "Row 3" },
|
|
{ key: "row4", label: "Row 4" },
|
|
] as const;
|
|
|
|
export function MarqueeSettingsForm({
|
|
action,
|
|
initialSettings,
|
|
}: MarqueeSettingsFormProps) {
|
|
return (
|
|
<form id="marquee-settings-form" action={action} className="space-y-6">
|
|
<AppCard>
|
|
<CardHeader>
|
|
<CardTitle>Marquee Rows</CardTitle>
|
|
<CardDescription>Ein Feld pro Zeile. Ein Begriff pro Zeile oder mit Komma getrennt.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6 xl:grid-cols-3">
|
|
{localeMeta.map((locale) => (
|
|
<div key={locale.key} className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-foreground">{locale.label}</h3>
|
|
<p className="text-xs text-muted-foreground">Vier Marquee Zeilen fuer diese Sprache.</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{rowMeta.map((row) => (
|
|
<div key={`${locale.key}-${row.key}`} className="space-y-2">
|
|
<Label htmlFor={`${row.key}-${locale.key}`}>{row.label}</Label>
|
|
<Textarea
|
|
id={`${row.key}-${locale.key}`}
|
|
name={`${row.key}-${locale.key}`}
|
|
defaultValue={initialSettings.locales[locale.key][row.key]}
|
|
className="min-h-[180px] resize-y"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</AppCard>
|
|
</form>
|
|
);
|
|
}
|