Innit

src/components/RSVP.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import '../styles/global.css';
+
+interface FormData {
+	name: string;
+	dietaryRestrictions: string;
+}
+
+const RSVPForm = () => {
+	const [formData, setFormData] = useState<FormData>({
+		name: '',
+		dietaryRestrictions: '',
+	});
+
+	const isFormValid =
+		formData.name.trim().length > 0;
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!isFormValid) return;
+
+		// Here you would typically send the data to a server
+		console.log(formData);
+
+		// Reset form
+		setFormData({
+			name: '',
+			dietaryRestrictions: '',
+		});
+
+		// You might want to replace this with a proper toast notification
+		alert('Thank you for your RSVP!');
+	};
+
+	return (
+		<div className="max-w-2xl mx-auto p-6">
+			<div className="card bg-base-100 shadow-xl">
+				<div className="card-body flex flex-col gap-6">
+					<h2 className="card-title text-2xl font-bold text-center justify-center">
+						Wedding RSVP
+					</h2>
+
+					<form onSubmit={handleSubmit} className="flex flex-col gap-6">
+						{/* Name Input */}
+						<div className="flex flex-col gap-2">
+							<label htmlFor="name" className="label">
+								<span className="label-text">Full Name *</span>
+							</label>
+							<input
+								type="text"
+								id="name"
+								value={formData.name}
+								onChange={(e) =>
+									setFormData((prev) => ({ ...prev, name: e.target.value }))
+								}
+								placeholder="Enter your full name"
+								className="input input-bordered w-full"
+								required
+							/>
+						</div>
+
+						{/* Dietary Restrictions Input */}
+						<div className="flex flex-col gap-2">
+							<label htmlFor="dietary" className="label">
+								<span className="label-text">Dietary Restrictions</span>
+							</label>
+							<textarea
+								id="dietary"
+								value={formData.dietaryRestrictions}
+								onChange={(e) =>
+									setFormData((prev) => ({
+										...prev,
+										dietaryRestrictions: e.target.value,
+									}))
+								}
+								placeholder="Please list any dietary restrictions or allergies"
+								className="textarea textarea-bordered h-24"
+							/>
+						</div>
+
+						{/* Submit Button */}
+						<button
+							type="submit"
+							className="btn btn-primary w-full"
+							disabled={!isFormValid}
+						>
+							I'll Be There!
+						</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default RSVPForm;