Merge pull request #119 from KaiAlan/main

Live Page Ui

src/App.jsx

@@ -9,6 +9,7 @@ import Cloud from "./pages/cloud101/Cloud101";
 import CodeofConduct from "./pages/coc/CodeofConduct";
 import Evangelist from "./pages/evangelist/Evangelist";
 import Events from "./pages/events/Events";
+import Live from './pages/live/Live'
 import Home from "./pages/home/Home";
 import Surprise from "./pages/surprise/Surprise";
 import Team from "./pages/team/Team";
@@ -25,6 +26,7 @@ const App = () => {
             window.location.pathname === "/coc" ||
             window.location.pathname === "/brand" ||
             window.location.pathname === "/events" ||
+            window.location.pathname === "/live" ||
             window.location.pathname === "/team") && <Navbar />}
           <Routes>
             <Route exact path="/" element={<Home />} />
@@ -95,6 +97,7 @@ const App = () => {
             <Route exact path="/events" element={<Events />} />
             <Route exact path="/evangelist" element={<Evangelist />} />
             <Route exact path="/team" element={<Team />} />
+            <Route exact path="/live" element={<Live />} />
             <Route exact path="/load" element={<Loading />} />
             {/* <Route exact path="/surprise" element={<Register />} /> */}
             <Route exact path="/*" element={<Notfound />} />

src/pages/live/EventSection.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Events } from './Events'
+
+import "./EventSection.scss";
+
+const EventCard = ({ event }) => {
+    return (
+        <div className="card">
+            {/* <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.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>
+        </div>
+    );
+};
+
+const EventSection = () => {
+    const currentTime = new Date();
+
+    // Sort events by 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 startTime = new Date(event.startTime);
+        const endTime = new Date(event.endTime);
+        let status = '';
+
+        if (currentTime >= startTime && currentTime <= endTime) {
+            status = 'Live';
+        } else if (currentTime < startTime) {
+            status = 'Upcoming';
+        } else {
+            status = 'Past';
+        }
+
+        return { ...event, status };
+    });
+
+    // Separate live event and upcoming events
+    const liveEvent = eventsWithStatus.find(event => event.status === 'Live');
+    const upcomingEvents = eventsWithStatus.filter(event => event.status === 'Upcoming');
+
+    return (
+        <div className="event-list">
+            <div className="live-event">
+                <div className='badge-live'>
+                    <span></span>
+                    <h2>Live Event</h2>
+                </div>
+                {liveEvent && <EventCard event={liveEvent} />}
+            </div>
+            <div className="upcoming-events">
+                <div className='badge-upcoming'>
+                    <span></span>
+                    <h2>Upcoming Event</h2>
+                </div>
+                {upcomingEvents && <EventCard event={upcomingEvents[0]} />}
+                {/* {upcomingEvents.map((event, index) => (
+                    <EventCard key={index} event={event} />
+                ))} */}
+            </div>
+        </div>
+    );
+};
+
+export default EventSection

src/pages/live/EventSection.scss

@@ -0,0 +1,136 @@
+.card {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 2rem;
+    border: solid white 1px;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 20px 0;
+
+    @media screen and (max-width: 720px) {
+        flex-direction: column;
+        width: 250px;
+        padding: 0 1rem;
+        gap: 0;
+    }
+
+    .card-img-top {
+        $size: 250px;
+        height: $size;
+        width: $size;
+    }
+
+    .card-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: start;
+        gap: 3rem;
+
+        @media screen and (max-width: 720px) {
+            gap: 2rem;
+            padding: 1rem;
+        }
+
+        .card-details {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+
+            .card-description {
+                opacity: 40%;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+        }
+    }
+
+    .card-text {
+        display: flex;
+        gap: 1rem;
+        font-weight: 600;
+        font-size: large;
+    }
+}
+
+.event-list {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    gap: 10rem;
+    padding: 0 7rem;
+
+    @media screen and (max-width: 1120px) {
+        flex-direction: column;
+        align-items: center;
+        gap: 2.5rem;
+        padding: 0;
+    }
+
+
+    .live-event {
+        flex: 1;
+        flex-direction: column;
+        max-width: 600px;
+
+        .badge-live {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+            gap: 5px;
+            color: #fff;
+            padding: 1rem 0;
+
+            span {
+                $size: 20px;
+                height: $size;
+                width: $size;
+                border-radius: 50%;
+                background-color: #28a745;
+                animation: blink 2s infinite;
+            }
+        }
+    }
+
+    .upcoming-events {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        max-width: 600px;
+
+        .badge-upcoming {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+            gap: 5px;
+            color: #fff;
+            padding: 1rem 0;
+
+            span {
+                $size: 20px;
+                height: $size;
+                width: $size;
+                border-radius: 50%;
+                background-color: #ff1717;
+                animation: blink 2s infinite;
+            }
+        }
+    }
+}
+
+@keyframes blink {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }

src/pages/live/Events.js

@@ -0,0 +1,39 @@
+
+export const Events = [
+    {
+        name: "GitHub Workshop/ Session",
+        description: "",
+        startTime: "2024-06-28T14:30:00",
+        endTime: "2024-06-28T15:10:00",
+        place: "",
+    },
+    {
+        name: "Filecoin Workshop/ Session",
+        description: "",
+        time: "2024-06-22T23:00:00",
+        startTime: "2024-06-28T15:10:00",
+        endTime: "2024-06-28T15:30:00",
+        place: "",
+    },
+    {
+        name: "Avalanche Workshop/ Session",
+        description: "",
+        startTime: "2024-06-28T15:30:00",
+        endTime: "2024-06-23T16:00:00",
+        place: "",
+    },
+    {
+        name: "Google Cloud Kolkata Workshop/ Session",
+        description: "",
+        startTime: "2024-06-28T16:00:00",
+        endTime: "2024-06-23T16:20:00",
+        place: "",
+    },
+    {
+        name: "Router Protocol Workshop/ Session",
+        description: "",
+        startTime: "2024-06-28T16:20:00",
+        endTime: "2024-06-23T17:00:00",
+        place: "",
+    },
+]