From fdb719f3a9c5a9f1b992e5e09a181eb16c07d5d4 Mon Sep 17 00:00:00 2001
From: Harini312821 <harini280905@gmail.com>
Date: Thu, 1 Aug 2024 00:28:43 +0800
Subject: [PATCH] register event page

---
 client/src/App.tsx                    |  2 ++
 client/src/pages/EventDetailsPage.tsx |  8 +++++++-
 client/src/pages/RegisterPage.tsx     | 26 ++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/RegisterPage.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3c3c306..fe1efc9 100644
--- a/client/src/App.tsx
+++ b/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">
diff --git a/client/src/pages/EventDetailsPage.tsx b/client/src/pages/EventDetailsPage.tsx
index 7306c6a..ade7f5b 100644
--- a/client/src/pages/EventDetailsPage.tsx
+++ b/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>
diff --git a/client/src/pages/RegisterPage.tsx b/client/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..3638dc8
--- /dev/null
+++ b/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;