t.indorf
102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Loader2, Save } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { updateMyContact } from "../actions";
|
|
|
|
type ContactFormProps = {
|
|
contact: {
|
|
phone: string | null;
|
|
street: string | null;
|
|
postalCode: string | null;
|
|
city: string | null;
|
|
};
|
|
};
|
|
|
|
export function ContactForm({ contact }: ContactFormProps) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
function handleSubmit(formData: FormData) {
|
|
startTransition(async () => {
|
|
const result = await updateMyContact({
|
|
phone: String(formData.get("phone") ?? ""),
|
|
street: String(formData.get("street") ?? ""),
|
|
postalCode: String(formData.get("postalCode") ?? ""),
|
|
city: String(formData.get("city") ?? ""),
|
|
});
|
|
|
|
if (result.error) {
|
|
toast.error(result.error);
|
|
return;
|
|
}
|
|
|
|
toast.success("Kontaktdaten gespeichert.");
|
|
router.refresh();
|
|
});
|
|
}
|
|
|
|
return (
|
|
<form action={handleSubmit} className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="phone">Telefonnummer</Label>
|
|
<Input
|
|
id="phone"
|
|
name="phone"
|
|
type="tel"
|
|
defaultValue={contact.phone ?? ""}
|
|
placeholder="+49 30 123456"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="street">Straße und Hausnummer</Label>
|
|
<Input
|
|
id="street"
|
|
name="street"
|
|
defaultValue={contact.street ?? ""}
|
|
placeholder="Beispielweg 12"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-[120px_1fr]">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="postalCode">PLZ</Label>
|
|
<Input
|
|
id="postalCode"
|
|
name="postalCode"
|
|
defaultValue={contact.postalCode ?? ""}
|
|
placeholder="10115"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="city">Ort</Label>
|
|
<Input
|
|
id="city"
|
|
name="city"
|
|
defaultValue={contact.city ?? ""}
|
|
placeholder="Berlin"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={isPending}>
|
|
{isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="h-4 w-4" />
|
|
)}
|
|
Speichern
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|