feat:admin

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -1,6 +1,9 @@
 "use client";
 
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
+import { toast } from "sonner";
+import { orpc } from "@/utils/orpc";
 
 export default function EventRegistrationForm() {
 	const [formData, setFormData] = useState({
@@ -12,9 +15,34 @@ export default function EventRegistrationForm() {
 		experience: "",
 	});
 
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Registratie succesvol!");
+			setFormData({
+				firstName: "",
+				lastName: "",
+				email: "",
+				phone: "",
+				artForm: "",
+				experience: "",
+			});
+		},
+		onError: (error) => {
+			toast.error(`Er is iets misgegaan: ${error.message}`);
+		},
+	});
+
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault();
-		console.log("Form submitted:", formData);
+		submitMutation.mutate({
+			firstName: formData.firstName,
+			lastName: formData.lastName,
+			email: formData.email,
+			phone: formData.phone || undefined,
+			artForm: formData.artForm,
+			experience: formData.experience || undefined,
+		});
 	};
 
 	const handleChange = (
@@ -57,6 +85,7 @@ export default function EventRegistrationForm() {
 									value={formData.firstName}
 									onChange={handleChange}
 									placeholder="Jouw voornaam"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -75,6 +104,7 @@ export default function EventRegistrationForm() {
 									value={formData.lastName}
 									onChange={handleChange}
 									placeholder="Jouw achternaam"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -96,6 +126,7 @@ export default function EventRegistrationForm() {
 									value={formData.email}
 									onChange={handleChange}
 									placeholder="jouw@email.nl"
+									required
 									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 								/>
 							</div>
@@ -134,6 +165,7 @@ export default function EventRegistrationForm() {
 								value={formData.artForm}
 								onChange={handleChange}
 								placeholder="Muziek, Theater, Dans, etc."
+								required
 								className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
 							/>
 						</div>
@@ -164,9 +196,10 @@ export default function EventRegistrationForm() {
 					<div className="mt-auto flex flex-col items-center gap-4 pt-12">
 						<button
 							type="submit"
-							className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100"
+							disabled={submitMutation.isPending}
+							className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
 						>
-							Bevestigen
+							{submitMutation.isPending ? "Bezig..." : "Bevestigen"}
 						</button>
 
 						<p className="text-center font-['Intro',sans-serif] text-sm text-white/60">