feat: implement table

src/components/Home/AgendasSection.tsx

@@ -0,0 +1,146 @@
+import { agendaData } from '@/configs/data.configs'
+import styled from '@emotion/styled'
+import { Section, SectionTitle } from './StyledComponents'
+
+const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  h4 {
+    font-size: 18px;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+    min-height: 80px;
+  }
+
+  tbody {
+    border: 1px dashed #000;
+  }
+`
+
+const TableHeader = styled.th`
+  padding: 10px;
+  font-weight: bold;
+  text-align: center;
+  font-weight: 400;
+`
+
+const TableRow = styled.tr``
+
+const TableData = styled.td`
+  padding: 24px;
+  font-size: 12px;
+  height: 190px;
+  border-bottom: 1px dashed #000;
+  width: 33%;
+`
+
+const TimeSlot = styled.td`
+  font-size: 14px;
+  padding: 0px 15px 0px 16px;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  text-align: center;
+  width: 52px;
+  background-color: #fafafa;
+
+  border-bottom: 1px dashed #000;
+  border-left: 1px dashed #000;
+`
+
+const SpeakerInfo = styled.span`
+  font-size: 10px;
+  opacity: 0.5;
+  margin-top: 5px;
+  font-size: 14px;
+`
+
+const TableContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+  height: 100%;
+`
+
+const AgendasSection = () => {
+  return (
+    <Section id="about-logos">
+      <SectionTitle>About</SectionTitle>
+      <StyledTable>
+        <thead>
+          <TableRow>
+            <TableHeader></TableHeader>
+            <TableHeader>Main Stage</TableHeader>
+            <TableHeader></TableHeader>
+            <TableHeader>Demo Room</TableHeader>
+            <TableHeader></TableHeader>
+            <TableHeader>Round Table</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody>
+          {agendaData.map((item, index) => (
+            <TableRow key={index}>
+              <TimeSlot>{item.time}</TimeSlot>
+              <TableData>
+                {item.sessions.mainStage && (
+                  <TableContent>
+                    <h4>{item.sessions.mainStage.title}</h4>
+                    <div>
+                      {item.sessions.mainStage.speakers.map((speaker, i) => (
+                        <SpeakerInfo key={i}>
+                          {speaker}
+                          {i !== item.sessions.mainStage.speakers.length - 1 &&
+                            ', '}
+                        </SpeakerInfo>
+                      ))}
+                    </div>
+                  </TableContent>
+                )}
+              </TableData>
+              <TimeSlot>{item.time}</TimeSlot>
+              <TableData>
+                {item.sessions.demoRoom && (
+                  <TableContent>
+                    <h4>{item.sessions.demoRoom.title}</h4>
+                    <div>
+                      {item?.sessions?.demoRoom?.speakers.map((speaker, i) => (
+                        <SpeakerInfo key={i}>
+                          {speaker}
+                          {item.sessions.demoRoom &&
+                            i !== item.sessions.demoRoom.speakers.length - 1 &&
+                            ', '}
+                        </SpeakerInfo>
+                      ))}
+                    </div>
+                  </TableContent>
+                )}
+              </TableData>
+              <TimeSlot>{item.time}</TimeSlot>
+              <TableData>
+                {item.sessions.roundTable && (
+                  <TableContent>
+                    <h4>{item.sessions.roundTable.title}</h4>
+                    <div>
+                      {item.sessions.roundTable.speakers.map((speaker, i) => (
+                        <SpeakerInfo key={i}>
+                          {speaker}
+                          {item.sessions.roundTable &&
+                            i !==
+                              item.sessions.roundTable?.speakers?.length - 1 &&
+                            ', '}
+                        </SpeakerInfo>
+                      ))}
+                    </div>
+                  </TableContent>
+                )}
+              </TableData>
+            </TableRow>
+          ))}
+        </tbody>
+      </StyledTable>
+    </Section>
+  )
+}
+
+export default AgendasSection

src/components/Home/HomePage.tsx

@@ -13,6 +13,7 @@ import ParticipantsSection from './ParticipantsSection'
 // import TicketsSection from './TicketsSection'
 import Link from 'next/link'
 import AboutLogosSection from './AboutLogosSection'
+import AgendasSection from './AgendasSection'
 import LightningTalksSection from './LightningTalksSection'
 import VideoSection from './VideoSection'
 
@@ -27,6 +28,7 @@ const HomePage: React.FC = () => {
         <ParticipantsSection />
         <PartnersSection />
         <AboutLogosSection />
+        <AgendasSection />
         {/* <ProgrammeSection /> */}
         <ArticlesSection />
         <MerchandiseSection />

src/configs/data.configs.ts

@@ -34,3 +34,59 @@ export const FooterLinksItems: {
     ],
   },
 }
+
+export const agendaData = [
+  {
+    time: '11:00',
+    sessions: {
+      mainStage: {
+        title: 'WELCOME',
+        speakers: ['Joe Nakamoto'],
+      },
+      demoRoom: null,
+      roundTable: null,
+    },
+  },
+  {
+    time: '11:10',
+    sessions: {
+      mainStage: {
+        title: 'LOGOS WELCOME',
+        speakers: ['Jarrad Hope'],
+      },
+      demoRoom: null,
+      roundTable: null,
+    },
+  },
+  {
+    time: '11:30',
+    sessions: {
+      mainStage: {
+        title: 'FAREWELL TO WESTPHALIA; BEYOND THE NATION STATE',
+        speakers: ['Tom W. Bell', 'Jarrad Hope', 'Peter Ludlow'],
+      },
+      demoRoom: {
+        title: 'KEYCARD PRO: A NEXT-GENERATION HARDWARE WALLET',
+        speakers: ['Guy Louis Grau'],
+      },
+      roundTable: null,
+    },
+  },
+  {
+    time: '12:30',
+    sessions: {
+      mainStage: {
+        title: 'LUNCH',
+        speakers: ['Chill Zone'],
+      },
+      demoRoom: {
+        title: 'LUNCH',
+        speakers: ['Chill Zone'],
+      },
+      roundTable: {
+        title: 'LUNCH',
+        speakers: ['Chill Zone'],
+      },
+    },
+  },
+]