Files
got-gaming/components/houses/HouseForm.tsx

91 lines
2.4 KiB
TypeScript

"use client";
import { useState, useTransition } from "react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Textarea from "@/components/ui/Textarea";
import Alert from "@/components/ui/Alert";
import { createHouse } from "@/actions/houses/create";
import { updateHouse } from "@/actions/houses/update";
interface HouseFormProps {
house?: {
id: string;
name: string;
description: string | null;
};
onSuccess?: () => void;
onCancel?: () => void;
}
export default function HouseForm({
house,
onSuccess,
onCancel,
}: HouseFormProps) {
const [name, setName] = useState(house?.name || "");
const [description, setDescription] = useState(house?.description || "");
const [error, setError] = useState<string | null>(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setError(null);
startTransition(async () => {
const result = house
? await updateHouse(house.id, { name, description: description || null })
: await createHouse({ name, description: description || null });
if (result.success) {
onSuccess?.();
} else {
setError(result.error || "Une erreur est survenue");
}
});
};
return (
<form onSubmit={handleSubmit} className="space-y-4">
{error && <Alert variant="error">{error}</Alert>}
<Input
label="Nom de la maison"
value={name}
onChange={(e) => setName(e.target.value)}
required
minLength={3}
maxLength={50}
disabled={isPending}
/>
<Textarea
label="Description (optionnelle)"
value={description}
onChange={(e) => setDescription(e.target.value)}
maxLength={500}
disabled={isPending}
rows={4}
/>
<div className="flex flex-col sm:flex-row gap-2">
<Button type="submit" disabled={isPending} variant="primary" className="w-full sm:w-auto">
{isPending ? "Enregistrement..." : house ? "Modifier" : "Créer"}
</Button>
{onCancel && (
<Button
type="button"
onClick={onCancel}
disabled={isPending}
variant="secondary"
className="w-full sm:w-auto"
>
Annuler
</Button>
)}
</div>
</form>
);
}