register event page

client/src/App.tsx

@@ -12,6 +12,7 @@ import PostPage from "./pages/PostPage";
 import SchedulePage from "./pages/SchedulePage";
 import EventsPage from "./pages/EventsPage";
 import EventDetailsPage from "./pages/EventDetailsPage";
+import RegisterPage from "./pages/RegisterPage";
 import CreateEventsPage from "./pages/CreateEventsPage";
 import ManageEventsPage from "./pages/ManageEventsPage";
 import AdministratorSpringboard from "./pages/AdministratorSpringboard";
@@ -48,6 +49,7 @@ function App() {
               <Route index element={<EventsPage />} />
             </Route>
             <Route element={<EventDetailsPage />} path="event/:id" />
+            <Route path="/register/:id" element={<RegisterPage />} />
 
             {/* Karang Guni Schedules Route */}
             <Route path="karang-guni-schedules">

client/src/pages/EventDetailsPage.tsx

@@ -33,7 +33,7 @@ const EventDetailsPage = () => {
         className="mb-4 bg-gray-200 text-black rounded px-4 py-2 hover:bg-gray-300"
         onClick={() => navigate(-1)}
       >
-        <ArrowUTurnLeftIcon/>
+        <ArrowUTurnLeftIcon />
         Back to Events
       </Button>
       <Card className="bg-white rounded-lg overflow-hidden border">
@@ -64,6 +64,12 @@ const EventDetailsPage = () => {
           <p className="text-gray-600 mt-2">
             <strong>Slots Available:</strong> {event.slotsAvailable}
           </p>
+          <Button
+            className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:red"
+            onClick={() => navigate(`/register/${id}`)}
+          >
+            Register for Event
+          </Button>
         </CardBody>
       </Card>
     </div>

client/src/pages/RegisterPage.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { Button } from "@nextui-org/react";
+
+const RegisterPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  const handleRegister = () => {
+    // Add logic for registration here, if needed
+    console.log(`Registered for event with ID: ${id}`);
+  };
+
+  return (
+    <div className="w-full h-full p-8">
+      <h1 className="text-2xl font-bold mb-4">Register for Event</h1>
+      <Button
+        className="bg-red-500 text-white rounded px-4 py-2 hover:bg-red-600"
+        onClick={handleRegister}
+      >
+        Register
+      </Button>
+    </div>
+  );
+};
+
+export default RegisterPage;