events client and server side

client/src/App.tsx

@@ -9,6 +9,7 @@ import CommunityPage from "./pages/CommunityPage";
 import CreatePostPage from "./pages/CreatePostPage";
 import EditPostPage from "./pages/EditPostPage";
 import SchedulePage from "./pages/SchedulePage";
+import EventsPage from "./pages/EventsPage";
 
 function App() {
   return (
@@ -23,6 +24,8 @@ function App() {
       <Route element={<CreatePostPage />} path="/createPost" />
       <Route element={<EditPostPage />} path="/editPost/:id" />
       <Route element={<SchedulePage />} path="/schedule" />
+      <Route element={<EventsPage />} path="/events" />
+
     </Routes>
   );
 }

client/src/components/NavigationBar.tsx

@@ -76,7 +76,13 @@ export default function NavigationBar() {
               />
             </Button>
             <div className="flex flex-row *:my-auto *:text-red-800 dark:*:text-red-100">
-              <Button variant="light" size="sm">
+              <Button 
+                variant="light" 
+                size="sm"
+                onPress={() => {
+                  navigate("/events");
+                }}
+              >
                 <p className="text-lg">Events</p>
               </Button>
               <Button

client/src/pages/EventsPage.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import DefaultLayout from "../layouts/default";
+import { useNavigate } from 'react-router-dom';
+import instance from "../security/http";
+import config from "../config";
+
+const EventsPage = () => {
+  const [events, setEvents] = useState<any[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    instance.get(config.serverAddress + "/events").then((res) => {
+      setEvents(res.data);
+    });
+  }, []);
+
+  return (
+    <DefaultLayout>
+      <div className="p-8">
+        <div className="mb-6">
+          <h2 className="text-3xl font-semibold text-red-600">Events</h2>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {events.map((event) => (
+            <div key={event.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
+              <img
+                src={`${config.serverAddress}${event.imageUrl}`}
+                alt={event.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
+                <p className="text-gray-600 mb-4">{event.description}</p>
+                <button
+                  className="bg-red-600 text-white rounded px-4 py-2 hover:bg-red-700"
+                  onClick={() => navigate(`/event/${event.id}`)}
+                >
+                  View event details
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default EventsPage;