Ui-fix: Live Page reviewed ui

hack4bengal · Jun 23, 2024 · 95dd180 · 95dd180
1 parent 1fbcee5
commit 95dd180
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/src/pages/live/EventSection.jsx b/src/pages/live/EventSection.jsx
@@ -6,14 +6,14 @@ import "./EventSection.scss";
 const EventCard = ({ event }) => {
     return (
         <div className="card">
-            <img src={event.thumbnail} alt={event.name} className="card-img-top" />
+            {/* <img src={event.thumbnail} alt={event.name} className="card-img-top" /> */}
             <div className="card-body">
                 <div className='card-details'>
                 <h2 className="card-title">{event.name}</h2>
                 <p className="card-description">{event.description}</p>
                 </div>
                 <p className="card-text">
-                    <small className="text-muted">{new Date(event.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</small>
+                    <small className="text-muted">{new Date(event.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(event.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</small>
                     <small className="text-muted">{event.place}</small>
                 </p>
             </div>
@@ -23,20 +23,20 @@ const EventCard = ({ event }) => {
 
 const EventSection = () => {
     const currentTime = new Date();
-    const sixHoursLater = new Date(currentTime.getTime() + 6 * 60 * 60 * 1000);
 
     // Sort events by time
-    const sortedEvents = [...Events].sort((a, b) => new Date(a.time) - new Date(b.time));
+    const sortedEvents = [...Events].sort((a, b) => new Date(a.startTime) - new Date(b.startTime));
 
     // Determine the status of each event
     const eventsWithStatus = sortedEvents.map(event => {
-        const eventTime = new Date(event.time);
-        const twoHoursLater = new Date(eventTime.getTime() + 2 * 60 * 60 * 1000);
+
+        const startTime = new Date(event.startTime);
+        const endTime = new Date(event.endTime);
         let status = '';
 
-        if (currentTime >= eventTime && currentTime <= twoHoursLater) {
+        if (currentTime >= startTime && currentTime <= endTime) {
             status = 'Live';
-        } else if (currentTime < eventTime) {
+        } else if (currentTime < startTime) {
             status = 'Upcoming';
         } else {
             status = 'Past';
@@ -47,9 +47,7 @@ const EventSection = () => {
 
     // Separate live event and upcoming events
     const liveEvent = eventsWithStatus.find(event => event.status === 'Live');
-    const upcomingEvents = eventsWithStatus.filter(event =>
-        event.status === 'Upcoming' && new Date(event.time) <= sixHoursLater
-    );
+    const upcomingEvents = eventsWithStatus.filter(event => event.status === 'Upcoming');
 
     return (
         <div className="event-list">

diff --git a/src/pages/live/EventSection.scss b/src/pages/live/EventSection.scss
@@ -4,6 +4,7 @@
     align-items: center;
     gap: 2rem;
     border: solid white 1px;
+    border-radius: 0.5rem;
     padding: 1rem;
     margin: 20px 0;
 
@@ -59,11 +60,12 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    gap: 5rem;
+    gap: 10rem;
 
     @media screen and (max-width: 1120px) {
         flex-direction: column;
         align-items: center;
+        gap: 2.5rem;
     }
 
 

diff --git a/src/pages/live/Events.js b/src/pages/live/Events.js
@@ -6,21 +6,25 @@ export const Events = [
         name: "ML 101",
         thumbnail: ml101,
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit.",
-        time: "2024-06-23T03:00:00",
+        startTime: "2024-06-23T20:00:00",
+        endTime: "2024-06-23T23:00:00",
         place: "Room 216",
     },
     {
         name: "UI/UX 101",
         thumbnail: uiux101,
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit.",
         time: "2024-06-22T23:00:00",
+        startTime: "2024-06-23T13:00:00",
+        endTime: "2024-06-23T15:00:00",
         place: "Room 209",
     },
     {
         name: "Sponsor Event",
         thumbnail: uiux101,
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        time: "2024-06-23T03:00:00",
+        startTime: "2024-06-23T12:00:00",
+        endTime: "2024-06-23T13:00:00",
         place: "Room 216",
     },
 ]
diff --git a/src/pages/live/Live.jsx b/src/pages/live/Live.jsx
@@ -14,10 +14,12 @@ import "./Live.scss";
 import EventSection from "./EventSection";
 
 const Live = () => {
-  const LiveDate = new Date("2024-06-28T18:00:00");
+  const LiveDate = new Date("2024-06-22T18:00:00");
+  // const LiveDate = new Date("2024-06-28T18:00:00");
 
   const calculateTimeLeft = () => {
-    const targetDate = new Date("2024-06-30T06:00:00");
+    const targetDate = new Date("2024-06-25T06:00:00");
+    // const targetDate = new Date("2024-06-30T06:00:00");
     const now = new Date();
     const difference = targetDate - now;