From e4e20c5bcfd15850892ae6ae9d985743e7c97f5b Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 29 Apr 2025 14:01:29 -0400
Subject: [PATCH] Add navigation to RSVP form from event cards

---
 frontend/src/App.tsx                  |  2 +-
 frontend/src/components/EventList.tsx | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a98f774..8a1b9e2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -40,7 +40,7 @@ const App: React.FC = () => {
               <Routes>
                 <Route path="/" element={<EventList />} />
                 <Route path="/create" element={<EventForm />} />
-                <Route path="/events/:slug" element={<RSVPForm />} />
+                <Route path="/events/:slug/rsvp" element={<RSVPForm />} />
               </Routes>
             </div>
           </main>
diff --git a/frontend/src/components/EventList.tsx b/frontend/src/components/EventList.tsx
index 303968a..62b17ef 100644
--- a/frontend/src/components/EventList.tsx
+++ b/frontend/src/components/EventList.tsx
@@ -16,6 +16,7 @@ interface Event {
   description: string;
   date: string;
   location: string;
+  slug: string;
 }
 
 const EventList: React.FC = () => {
@@ -35,6 +36,10 @@ const EventList: React.FC = () => {
     }
   };
 
+  const handleEventClick = (event: Event) => {
+    navigate(`/events/${event.slug}/rsvp`);
+  };
+
   return (
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
@@ -53,7 +58,15 @@ const EventList: React.FC = () => {
       <Grid container spacing={3}>
         {events.map((event) => (
           <Grid item xs={12} key={event.id}>
-            <Card>
+            <Card 
+              onClick={() => handleEventClick(event)}
+              sx={{ 
+                cursor: 'pointer',
+                '&:hover': {
+                  boxShadow: 6,
+                }
+              }}
+            >
               <CardContent>
                 <Typography variant="h5" component="h2">
                   {event.title}