Overall improvements of StreamETH

app/(home)/components/EventCard.tsx

@@ -29,7 +29,7 @@ const EventCard = ({ event }: { event: IEvent }) => {
   }
 
   return (
-    <a onClick={onCardClick}>
+    <a onClick={onCardClick} className="cursor-pointer hover:bg-gray-50 transition-all">
       <Card isAvailable={isAvailable}>
         <div className="aspect-video relative">
           <Image
@@ -51,8 +51,8 @@ const EventCard = ({ event }: { event: IEvent }) => {
             }}
           />
         </div>
-        <div className=" p-2 flex flex-col">
-          <p className=" text-md my-2 ">{event.name}</p>
+        <div className=" p-2 flex flex-col" title={event.name}>
+          <p className=" text-md my-2 truncate">{event.name}</p>
           <p className="text-md text-secondary-text">
             {event.start.toDateString?.()} - {event.end.toDateString?.()}
           </p>

app/[organization]/[event]/(eventHome)/components/HompageLogoAndBanner.tsx

@@ -8,13 +8,13 @@ const HomePageLogoAndBanner = ({ event }: { event: IEvent }) => {
     <div className="relative w-full">
       <div className="relative">
         <Image src={'/events/' + banner} alt="Event Cover" width={1500} height={500} className="w-full object-cover" />
-        {/* <Image
+        <Image
           src={'/events/' + logo}
           alt="Event Logo"
           width={128}
           height={128}
           className="absolute bottom-0 translate-y-1/2 translate-x-3 lg:translate-x-1/2 w-24 h-24 lg:w-32 lg:h-32 object-cover bg-white"
-        /> */}
+        />
       </div>
     </div>
   )

app/[organization]/[event]/(eventHome)/page.tsx

@@ -1,16 +1,14 @@
 import EventController from '@/server/controller/event'
-import StageController from '@/server/controller/stage'
 import { notFound } from 'next/navigation'
 import { hasData } from '@/server/utils'
-import { getEventDays } from '@/utils/time'
-import HomePageLogoAndBanner from './components/HompageLogoAndBanner'
 import Link from 'next/link'
-import Markdown from 'react-markdown'
 import SpeakerPageComponent from './speakers/page'
 import SchedulePageComponent from './schedule/page'
+
 interface Params {
   event: string
   organization: string
+  speaker: string
 }
 
 const Button = ({ children, link }: { children: React.ReactNode; link: string }) => (
@@ -34,10 +32,10 @@ const EventHome = async ({ params }: { params: Params }) => {
         <div className="max-w-7xl mx-auto mt-4">
           <div className="flex flex-col p-4">
             <div className=" flex-col flex space-y-2 my-4 md:flex-col">
-              <h1 className="text-4xl py-4 text-center md:text-left">{event.name}</h1>
+              <h1 className="text-4xl py-4 text-center md:text-left font-bold">{event.name}</h1>
               <div className=" flex flex-col space-y-4 text-left">
                 <p>&#128197; When: October 20th</p>
-                <p>&#9200; Time: 9:00 AM - 10:30 AM EST / 1:00 PM - 2:30 PM UTC</p>
+                <p>&#9200; Time: 9:00 AM - 11:50 AM EST / 1:00 PM - 3:50 PM UTC</p>
                 <p>&#127759; Where: Live in Vietnam and Online</p>
                 <p>&#128421; Streamed @ launch.scroll.io</p>
                 <Link

app/[organization]/[event]/(eventHome)/schedule/components/DateSelect.tsx

@@ -18,7 +18,10 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
         <select className="text-xl cursor-pointer font-bold w-full p-2" value={date ? date : ''} onChange={(e) => handleDateChange(e.target.value)}>
           {dates.map((dateNum) => (
             <option key={dateNum} value={dateNum}>
-              {new Date(dateNum).toLocaleDateString()}
+              {
+                // {new Date(dateNum).toLocaleDateString()}
+              }
+              Thu Oct 20
             </option>
           ))}
         </select>
@@ -28,7 +31,10 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
             className={`ml-auto w-full p-2 text-center text-xl ${date !== dateNum ? 'text-black cursor-pointer' : 'text-black'}`}
             onClick={() => setDate(dateNum)}
             key={index}>
-            {new Date(dateNum).toDateString().slice(0, 10)}
+            {
+              // {new Date(dateNum).toDateString().slice(0, 10)}
+            }
+            Thu Oct 20
           </div>
         ))
       )}

app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCard.tsx

@@ -10,11 +10,11 @@ const ScheduleCard = ({ session, showTime = false, speakers = false }: { session
 
   return (
     <div
-      className="flex space-y-3 flex-col w-full h-full bg-base border shadow rounded p-1 md:p-2 cursor-pointer"
+      className="flex space-y-3 flex-col w-full h-full bg-base border shadow rounded p-1 md:p-2 hover:bg-gray-50 cursor-pointer transition-colors"
       onClick={() => {
         openModal(<ScheduleCardModal session={session} />)
       }}>
-      <div className=" border-l border-accent flex flex-col px-2 rounded-tr rounded-br w-full h-full">
+      <div className=" border-l border-accent hover:border-l-2 flex flex-col px-2 rounded-tr rounded-br w-full h-full">
         {showTime && (
           <p className="text-main-text text-sm uppercase py-1">
             {new Date(session.start).getHours().toString().padStart(2, '0') + ':' + new Date(session.start).getMinutes().toString().padStart(2, '0')}-
@@ -25,7 +25,6 @@ const ScheduleCard = ({ session, showTime = false, speakers = false }: { session
         {speakers && (
           <div className="flex py-1 items-center flex-row space-x-2 overflow-x-scroll mt-auto">
             {session.speakers.map((speaker) => (
-              // <SpeakerPhoto size="sm" key={speaker.id} speaker={speaker} />
               <p key={speaker.id} className="text-sm text-main-text border p-1 px-2 rounded-full whitespace-nowrap ">
                 {speaker.name}
               </p>

app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCardModal.tsx

@@ -28,7 +28,7 @@ const ScheduleCardModal = ({ session }: { session: ISession }) => {
       {showGoToStage && (
         <div
           onClick={handleGoToStage}
-          className="text-xs border-accent border-2 text-accent rounded ml-auto p-2 font-bold mb-4 hover:bg-accent hover:text-white">
+          className="text-xs border-accent border-2 cursor-pointer text-accent rounded ml-auto p-2 font-bold mb-4 hover:bg-accent hover:text-white">
           Go to Stream
         </div>
       )}

app/[organization]/[event]/(eventHome)/schedule/components/SchedulePageComponent.tsx

@@ -19,10 +19,11 @@ const SchedulePageComponent = async ({ params }: Params) => {
   const event = await eventController.getEvent(params.event, params.organization)
   const stages = (await new StageController().getAllStagesForEvent(params.event)).map((stage) => stage.toJson())
   const dates = getEventDays(event.start, event.end)
+
   return (
     <ScheduleContextProvider event={event.toJson()} stages={stages} days={dates}>
       <div className="flex flex-col max-w-7xl w-full mx-auto p-2">
-        <span className=" box-border flex flex-col justify-center p-2 bg-white shadow-b w-full my-4 text-5xl">Schedule</span>
+        <span className=" box-border flex flex-col justify-center p-2 bg-white shadow-b w-full my-4 text-5xl font-bold">Schedule</span>
 
         <div className="text-center sticky z-10 flex flex-row flex-wrap md:flex-col bg-base justify-center">
           <DateSelect dates={dates} />

app/[organization]/[event]/(eventHome)/schedule/page.tsx

@@ -17,7 +17,7 @@ export async function generateMetadata({ params }: Params, parent: ResolvingMeta
 
   return {
     title: `${event.name} - Home`,
-    description: `Attend ${event.name} virtually powered by streameth here`,
+    description: `Attend ${event.name} virtually powered by Streameth here`,
     openGraph: {
       images: [imageUrl],
     },

app/[organization]/[event]/(eventHome)/speakers/components/SpeakerCard.tsx

@@ -1,18 +1,17 @@
 import { ISpeaker } from '@/server/model/speaker'
 import SpeakerPhoto from './SpeakerPhoto'
-import Link from 'next/link'
 
-const SpeakerCard = ({ speaker, path }: { speaker: ISpeaker; path: string }) => {
+const SpeakerCard = ({ speaker, onClick }: { speaker: ISpeaker; onClick: () => void }) => {
   return (
-    <Link href={path} className="flex flex-col text-sm rounded w-full">
+    <div onClick={onClick}>
       <div className="border-1 shadow rounded-xl w-32 lg:w-44 mx-auto">
         <SpeakerPhoto speaker={speaker} size="lg" />
       </div>
       <div className="mx-auto text-center mt-2">
         <h3 className="text-md lg:text-lg md:text-xl mb-0">{speaker.name}</h3>
         <p className="text-black-500 text-md">{speaker.company}</p>
       </div>
-    </Link>
+    </div>
   )
 }
 

app/[organization]/[event]/(eventHome)/speakers/components/SpeakerModal.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import SpeakerPhoto from '../components/SpeakerPhoto'
+import ScheduleCard from '@/app/[organization]/[event]/(eventHome)/schedule/components/ScheduleCard'
+import { ISession } from '@/server/model/session'
+import { ISpeaker } from '@/server/model/speaker'
+
+interface Params {
+  speaker: ISpeaker
+  sessions: ISession[] | null
+}
+
+const SpeakerModal = ({ sessions, speaker }: Params) => {
+  if (!sessions) {
+    return null
+  }
+
+  const speakerSessions = sessions.filter((session) => session.speakers.some((sessionSpeaker) => sessionSpeaker.id === speaker.id))
+
+  return (
+    <div className="flex flex-col w-full p-4 justify-center items-center space-y-4">
+      <div className="flex justify-center items-center w-48 p-2 border bg-white border-accent rounded shadow">
+        <SpeakerPhoto speaker={speaker} size="lg" />
+      </div>
+      <div className="flex flex-col w-full max-w-xl space-y-4">
+        <div className="bg-gray-100 shadow p-4 rounded">
+          <p className="text-lg font-bold uppercase mb-4">{speaker.name}</p>
+          <p className="text-main-text py-1">{speaker.bio}</p>
+        </div>
+        <div className="flex flex-col bg-gray-100 shadow p-4 rounded space-y-4">
+          <p className="font-bold text-lg">Sessions</p>
+          {speakerSessions.map((session, index) => (
+            <ScheduleCard key={session.id} session={session} showTime />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SpeakerModal

app/[organization]/[event]/(eventHome)/speakers/page.tsx

@@ -1,3 +1,67 @@
-import SpeakerPageComponent from './components/SpeakerPageComponent'
+'use client'
 
-export default SpeakerPageComponent
+import { useEffect, useState, useContext } from 'react'
+import SpeakerCard from './components/SpeakerCard'
+import { ModalContext } from '@/components/context/ModalContext'
+import SpeakerModal from './components/SpeakerModal'
+import { ISpeaker } from '@/server/model/speaker'
+import { ISession } from '@/server/model/session'
+import { apiUrl } from '@/server/utils'
+
+interface Params {
+  params: {
+    organization: string
+    event: string
+    speaker: string
+  }
+}
+
+const SpeakerPage = ({ params }: Params) => {
+  const { openModal } = useContext(ModalContext)
+  const [speakers, setSpeakers] = useState<ISpeaker[]>([])
+  const [sessions, setSessions] = useState<ISession[] | null>(null) // Added state for sessions
+
+  useEffect(() => {
+    const fetchSpeakers = async () => {
+      const { organization, event } = params
+      const response = await fetch(`${apiUrl()}/organizations/${organization}/events/${event}/speakers`)
+      if (!response.ok) {
+        console.error('Failed to fetch speakers:', response.statusText)
+        return
+      }
+      const speakersData = await response.json()
+      setSpeakers(speakersData)
+    }
+
+    fetchSpeakers()
+  }, [params])
+
+  useEffect(() => {
+    const fetchSessions = async () => {
+      const { organization, event } = params
+      const response = await fetch(`${apiUrl()}/organizations/${organization}/events/${event}/sessions`)
+      if (!response.ok) {
+        console.error('Failed to fetch sessions:', response.statusText)
+        return
+      }
+      const sessionsData = await response.json()
+      setSessions(sessionsData)
+    }
+    fetchSessions()
+  }, [params])
+
+  return (
+    <div className="flex flex-col max-w-7xl w-full mx-auto p-2">
+      <span className=" box-border flex flex-col justify-center p-2 bg-white shadow-b w-full my-4 text-5xl font-bold">Speakers</span>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-12 w-full">
+        {speakers.map((speaker) => (
+          <div key={speaker.id} className="hover:bg-gray-50 cursor-pointer transition-colors">
+            <SpeakerCard speaker={speaker} onClick={() => openModal(<SpeakerModal speaker={speaker} sessions={sessions} />)} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SpeakerPage

components/Layout/NavbarTop.tsx

@@ -10,12 +10,15 @@ import { TopNavbarContext } from '../context/TopNavbarContext'
 
 export default function Navbar() {
   const pathname = usePathname()
-  const { logo, components, setLogo, homePath } = useContext(TopNavbarContext)
+  const { logo, components, homePath, setLogo, setHomePath } = useContext(TopNavbarContext)
+
   useEffect(() => {
     if (pathname === '/') {
       setLogo('')
+      setHomePath('/')
     }
-  }, [pathname])
+  }, [pathname, setLogo, setHomePath])
+
   return (
     <ColorComponent accentColor={colors.accent}>
       <header className="sticky z-50 flex flex-row bg-base border-b border-primary w-full ml-auto  p-4 py-2 top-0 h-16 lg:h-20">

components/context/TopNavbarContext.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { createContext, useEffect, useState } from 'react'
-import img from '@/public/logo.png'
+
+import { createContext, useState } from 'react'
 
 export const TopNavbarContext = createContext<{
   logo: string
@@ -21,7 +21,6 @@ export const TopNavbarContext = createContext<{
 export const TopNavbarContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [logo, setLogo] = useState('')
   const [homePath, setHomePath] = useState('')
-
   const [components, setComponents] = useState<React.ReactNode[]>([])
 
   return <TopNavbarContext.Provider value={{ logo, setLogo, components, setComponents, homePath, setHomePath }}>{children}</TopNavbarContext.Provider>