Events page

app/(default)/myevents/page.tsx

@@ -141,7 +141,7 @@ const EventsPage = () => {
 
   return (
     <div className="p-4 pt-20 relative">
-      <h1 className="text-3xl font-bold mb-4">Events</h1>
+      <h1 className="text-5xl font-bold mb-2 pl-5 pt-2 text-center">Events</h1>
       <div className="flex justify-end">
         {isAdminLoggedIn && (
           <button
@@ -157,29 +157,14 @@ const EventsPage = () => {
       {isAdminLoggedIn && showForm && <EventForm />}
 
       {/* Displaying the Events */}
-      <div className="mt-8">
+      <div className="mt-2">
         {/* Present Events */}
-        <h2 className="text-2xl font-bold mb-4 mt-8">Present Events</h2>
-        {presentEvents.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            {presentEvents.map((event) => (
-              <EventCard
-                key={event.id}
-                event={event}
-                isAdminLoggedIn={isAdminLoggedIn}
-                onDelete={deleteEvent}
-                onSelect={handleEventSelect}
-              />
-            ))}
-          </div>
-        ) : (
-          <p>No present events available.</p>
-        )}
+
 
         {/* Future Events */}
-        <h2 className="text-2xl font-bold mb-4 mt-8">Future Events</h2>
+        {/* <h2 className="text-2xl font-bold mb-4 mt-8">CurreEvents</h2> */}
         {futureEvents.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="flex justify-around">
             {futureEvents.map((event) => (
               <EventCard
                 key={event.id}
@@ -191,14 +176,14 @@ const EventsPage = () => {
             ))}
           </div>
         ) : (
-          <p>No future events available.</p>
+          <p>No presents events available.</p>
         )}
       </div>
 
       {/* Past Events */}
-      <h2 className="text-2xl font-bold mb-4 mt-8">Past Events</h2>
+      <h2 className="text-3xl font-bold mb-8 mt-16 ml-4 text-center">Past Events</h2>
       {pastEvents.length > 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="flex justify-around">
           {pastEvents.map((event) => (
             <EventCard
               key={event.id}
@@ -215,7 +200,11 @@ const EventsPage = () => {
 
       {/* Sidebar for Event Details */}
       {isSidebarOpen && selectedEvent && (
-        <Sidebar event={selectedEvent} onClose={handleSidebarClose} />
+        <Sidebar
+          event={selectedEvent}
+          onClose={handleSidebarClose}
+          registrationLink={selectedEvent.registrationLink} // Pass registrationLink explicitly
+        />
       )}
 
       {/* Event Update Form */}

components/EventCard.tsx

@@ -40,7 +40,7 @@ const EventCard: React.FC<EventCardProps> = ({
 
   return (
     <div
-      className="relative bg-gray-900 shadow-lg rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl cursor-pointer"
+      className="relative bg-gray-900 shadow-lg rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl cursor-pointer w-1/4"
       onClick={() => onSelect(event)}
     >
       {/* Event Date Badge */}
@@ -50,7 +50,7 @@ const EventCard: React.FC<EventCardProps> = ({
       <Image
         src={event.imageURL}
         alt={event.eventName}
-        width={200}
+        width={300}
         height={100}
         className="w-full h-48 p-2 object-cover rounded-2xl"
       />

components/Sidebar.tsx

@@ -102,10 +102,7 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
 
         {/* Registration Section */}
         <div className="bg-gray-800 p-4 rounded-lg mb-4 shadow-md">
-          <div className="flex items-center mb-2">
-            <FaUserShield className="text-red-500 mr-2" />
-            <p className="text-gray-300">Approval Required</p>
-          </div>
+
           {event.lastDateOfRegistration >= currentDate && registrationLink && (
             <a
               href={registrationLink}
@@ -116,7 +113,7 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
               <button
                 className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition duration-200 shadow-md"
               >
-                Request to Join
+                Register Now
               </button>
             </a>
           )}

components/ui/footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
       <div className="mx-auto max-w-screen-xl text-center">
         <ul className="flex flex-wrap justify-center items-center mb-6 text-white">
           <li><Link href="/" className="mr-4 hover:underline md:mr-6">Home</Link></li>
-          {/* <li><Link href="/events" className="mr-4 hover:underline md:mr-6">Events</Link></li> */}
+          <li><Link href="/myevents" className="mr-4 hover:underline md:mr-6">Events</Link></li>
           <li><Link href="/leads" className="mr-4 hover:underline md:mr-6">Leads</Link></li>
           <li><Link href="/members" className="mr-4 hover:underline md:mr-6">Members</Link></li>
           <li><Link href="/achievements" className="mr-4 hover:underline md:mr-6">Achievements</Link></li>

components/ui/header.tsx

@@ -48,11 +48,11 @@ export default function Header() {
           </div>
           <nav className="hidden md:flex md:grow">
             <ul className="flex grow justify-end flex-wrap items-center">
-              {/* <li>
-                <Link href="/events">
-                  <p className={`font-medium ${pathname === '/events' ? 'font-extrabold text-white' : 'text-gray-300'} hover:text-white px-2 lg:px-5 py-3 flex items-center transition duration-150 ease-in-out`}>Events</p>
+              <li>
+                <Link href="/myevents">
+                  <p className={`font-medium ${pathname === '/myevents' ? 'font-extrabold text-white' : 'text-gray-300'} hover:text-white px-2 lg:px-5 py-3 flex items-center transition duration-150 ease-in-out`}>Events</p>
                 </Link>
-              </li> */}
+              </li>
               <li>
                 <Link href="/leads">
                   <p className={`font-medium ${pathname === '/leads' ? 'font-extrabold text-white' : 'text-gray-300'} hover:text-white px-2 lg:px-5 py-3 flex items-center transition duration-150 ease-in-out`}>Leads</p>

next.config.mjs

@@ -8,7 +8,8 @@ const nextConfig = {
       "firebasestorage.googleapis.com",
       "img.icons8.com",
       "icpc.global",
-      "img.freepik.com"
+      "img.freepik.com",
+      "media.licdn.com"
     ],
   },
 };