Program Table

add fonts add cell types add image
osmbe · Oct 11, 2023 · 61a86ef · 61a86ef
1 parent 2febb27
commit 61a86ef
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 292 deletions.
diff --git a/src/components/ProgramTable.jsx b/src/components/ProgramTable.jsx
@@ -1,72 +1,83 @@
 import Image from 'next/image'
-
-import { Container } from '@/components/Container'
 import Logo from '@/images/logos/SOTM_Blue_full_logo_black.png'
-import LogoAntwerpBlue from '@/images/icons/Antwerp_Icon_Blue.svg'
+import Fountain from '@/images/Fountain.jpg'
+
+export const YellowCell = ({ title, text, suptitle, rowSpan = 1 }) => (
+  <td
+    rowSpan={rowSpan}
+    className="border border-sotm-yellow bg-yellow-200 p-2 text-center font-poppins text-sotm-blue"
+  >
+    <div className="text-xs font-bold">{suptitle}</div>
+    <div className="font-bold">{title}</div>
+    <div>{text}</div>
+  </td>
+)
+
+export const FourColumnGreyCell = ({ title }) => (
+  <td
+    colSpan={4}
+    className="border border-sotm-yellow bg-gray-200 font-dunbar text-2xl font-bold text-sotm-blue"
+  >
+    {title}
+  </td>
+)
+
+export const TimeCell = ({ title }) => (
+  <td className="border bg-sotm-blue py-2 text-white">{title}</td>
+)
+
+export const BlueCell = ({ title }) => (
+  <td className="bg-indigo-500 border border-sotm-blue font-poppins text-xl text-white">
+    {title}
+  </td>
+)
 
+export const EmptyCell = () => <td className="border border-gray-200"></td>
 
-export function ProgramTable({ id }) {
-  return (
-    <Container>
-      <table class="table-fix w-full">
-        <thead>
-          <tr>
-            <th className='bg-blue-400' rowSpan={4}>
-
-              <Image
-                src={LogoAntwerpBlue}
-                height={160}
-                alt='antwerp logo'
-              />
-            </th>
-            <th colSpan={4}>
-              <div className="flex justify-between w-full">
-                <div className='grow'>
-                  <Image
-                    src={Logo}
-                    height={80}
-                    alt="State of the Map EU 2023"
-                  />
-                </div>
-                <div class="text-right">
-                  <h3 className="font-dunbar text-2xl font-bold text-sotm-blue sm:text-3xl">
-                    Program Day1
-                  </h3>
-                  <p className="font-dunbar text-2xl font-light text-black sm:text-3xl">
-                    Friday, November 10, 2023
-                  </p>
-                </div>
-              </div>
-            </th>
-          </tr>
-          <tr className=''>
-            <td className='border border-sotm-yellow text-center bg-gray-200 font-medium text-sotm-blue font-poppins' colSpan={4}>General Session</td>
-          </tr>
-          <tr>
-            <td className='border border-sotm-yellow bg-yellow-200 text-center text-sotm-blue font-poppins p-2'>
-              <div className='font-bold'>Something</div>
-              <div>Something</div>
-            </td>
-            <td className='border border-sotm-yellow bg-yellow-200 text-center text-sotm-blue font-poppins p-2'>
-              <div className='font-bold'>Something</div>
-              <div>Something</div>
-            </td>
-            <td className='border border-sotm-yellow bg-yellow-200 text-center text-sotm-blue font-poppins p-2'>
-              <div className='font-bold'>Something</div>
-              <div>Something</div>
-            </td>
-            <td className='border border-sotm-yellow bg-yellow-200 text-center text-sotm-blue font-poppins p-2'>
-              <div className='font-bold'>Something</div>
-              <div>Something</div>
-            </td>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>General Session</td>
-          </tr>
-        </tbody>
-      </table>
-    </Container>
-  )
-}
+export const TableHeader = ({ day, date, hasScientificTrack = false }) => (
+  <thead>
+    <tr>
+      <th
+        style={{ width: 150, padding: 0 }}
+        className="from-indigo-500 bg-gradient-to-r to-blue-300"
+        rowSpan={4}
+      >
+        <Image src={Fountain} width={150} alt="fountain" />
+      </th>
+      <th colSpan={4}>
+        <div className="flex w-full justify-between">
+          <div className="grow">
+            <Image src={Logo} height={80} alt="State of the Map EU 2023" />
+          </div>
+          <div class="text-right">
+            <h3 className="font-dunbar text-3xl font-bold text-sotm-blue sm:text-4xl">
+              Program Day{day}
+            </h3>
+            <p className="font-dunbar text-2xl font-medium text-black sm:text-3xl">
+              {date}
+            </p>
+          </div>
+        </div>
+      </th>
+    </tr>
+    <tr>
+      <td
+        className="border border-sotm-yellow bg-gray-200 text-center font-poppins font-medium text-sotm-blue"
+        colSpan={hasScientificTrack ? 3 : 4}
+      >
+        General Session
+      </td>
+      {hasScientificTrack && (
+        <td className="border border-sotm-yellow bg-gray-200 text-center font-poppins font-medium text-sotm-blue">
+          Scientific Track
+        </td>
+      )}
+    </tr>
+    <tr>
+      <YellowCell title="Marco Polo" text="Node Track" />
+      <YellowCell title="Orangerie" text="Way Track" />
+      <YellowCell title="Sacagawea" text="Relation Track" />
+      <YellowCell title="Vasco Da Gama" text="Tech Track" />
+    </tr>
+  </thead>
+)