fix : events page update and event list limit

src/apis/eventApi.tsx

@@ -77,13 +77,16 @@ export const getEvents = async (
     status: boolean,
     message: string | null,
     hideAfter: number | null
-  ) => void
+  ) => void,
+  limit: number | null | undefined = -1
 ): Promise<Array<_EventInfo> | null> => {
   setToast(false, null, null);
   if (eventId) {
     var res = publicRouter.get("/api/v2/events/get?id=" + eventId);
   } else {
-    var res = publicRouter.get("/api/v2/events/getAll");
+    var res = publicRouter.get(
+      "/api/v2/events/getAll" + (limit ? "?count=" + limit : "")
+    );
   }
   addLoader(res);
   var val = await validateResponse(res);

src/components/eventlist/EventList.tsx

@@ -5,14 +5,16 @@ import { getEvents } from "../../apis/eventApi";
 import { _Event } from "../../utils/types";
 import { useLoader } from "../toploader/useLoader";
 import { useToast } from "../toast/useToast";
-interface EventListProps {}
+interface EventListProps {
+  limit?: number;
+}
 
-const EventList: React.FC<EventListProps> = ({}) => {
+const EventList: React.FC<EventListProps> = ({ limit = undefined }) => {
   var { addLoader } = useLoader();
   var { setToastStatus } = useToast();
   const [events, setEvents] = useState<Array<_Event>>([]);
   useEffect(() => {
-    getEvents(null, addLoader, setToastStatus).then((e) => {
+    getEvents(null, addLoader, setToastStatus, limit).then((e) => {
       if (e) setEvents(e);
       else console.log("error : no event data got");
     });

src/pages/events/Events.module.css

@@ -3,11 +3,27 @@
   padding: 10px;
 
   .page {
-    width: calc(100% - 100px);
-    padding: 50px;
+    width: calc(100% - 30px);
+    padding: 15px;
     & h2 {
       margin-bottom: 20px;
       width: 100px;
     }
+
+    .intro {
+      display: block;
+      font-size: 15px;
+      color: var(--color-white-shade);
+      padding-bottom: 20px;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .events {
+    .page {
+      width: calc(100% - 200px);
+      padding: 50px 100px;
+    }
   }
 }

src/pages/events/Events.tsx

@@ -11,6 +11,16 @@ const Events: React.FC<EventsProps> = ({}) => {
       <div className={style.page}>
         <h2 className="underline start">Events</h2>
         <br />
+        <span className={style.intro}>
+          Explore the dynamic world of innovation and knowledge at our college's
+          technical fest. Dive into a diverse range of intellectually
+          stimulating events designed to challenge, inspire, and showcase the
+          brilliance of our student community. From coding competitions to
+          robotics challenges, our events page is a gateway to a thrilling
+          journey of creativity and skill.
+        </span>
+        <hr />
+        <br />
         <EventList />
       </div>
       <Footer />

src/pages/home/Home.tsx

@@ -62,7 +62,7 @@ const Home: React.FC<HomeProps> = ({}) => {
       <div className={style.page2}>
         <h2 className="underline">Events</h2>
         <br />
-        <EventList />
+        <EventList limit={4} />
       </div>
       <Footer />
     </div>