events

import { useState } from 'react'; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; const eventsList = [ { id: 1, title: "Worship Night", date: "2025-06-10" }, { id: 2, title: "Youth Conference", date: "2025-07-05" }, { id: 3, title: "Community Outreach", date: "2025-08-12" } ]; export default function EventsPage() { const [selectedEvent, setSelectedEvent] = useState(null); const [formData, setFormData] = useState({ name: '', email: '' }); const [submitted, setSubmitted] = useState(false); const handleRegister = (eventId) => { const event = eventsList.find(e => e.id === eventId); setSelectedEvent(event); setSubmitted(false); setFormData({ name: '', email: '' }); }; const handleSubmit = (e) => { e.preventDefault(); console.log("Registration Info:", formData, "Event:", selectedEvent); setSubmitted(true); }; return (

Upcoming Events

{eventsList.map(event => (

{event.title}

{event.date}

))}
{selectedEvent && (

Register for: {selectedEvent.title}

{submitted ? (

Thank you for registering!

) : (
setFormData({ ...formData, name: e.target.value })} required /> setFormData({ ...formData, email: e.target.value })} required />
)}
)}
); }