Merge pull request #209 from ASSETS-Conference/dev

Updated Posters and Demos as Per Spreadsheet + ID Numbering

package.json

@@ -1,6 +1,6 @@
 {
     "name": "assets-2024",
-    "version": "0.2.6",
+    "version": "1.2.6",
     "private": true,
     "scripts": {
         "dev": "next dev",

src/app/lib/components/schedule/ScheduleEvent.js

@@ -3,12 +3,14 @@ import MultiEvent from "./bits/MultiEvent";
 import SingleEvent from "./bits/SingleEvent";
 import DualTrack from "./bits/DualTrack";
 import Link from "../primitives/Link";
+import { BsInfoCircleFill } from "react-icons/bs";
 
 export const ScheduleEvent = ({
   background,
   startTime,
   endTime,
   title,
+  note,
   link,
   dualTrack,
   content,
@@ -23,10 +25,15 @@ export const ScheduleEvent = ({
         </h3>
         <h4 className="font-light text-sm md:text-xl mt-2 mb-2 p-0 md:text-left text-right flex md:flex-row flex-col md:gap-2">
           {title}
-          {link ? <Link className={'text-black'} href={link.href}>{link.text}</Link> : null}
+          {link ? (
+            <Link className={"text-black"} href={link.href}>
+              {link.text}
+            </Link>
+          ) : null}
         </h4>
       </div>
       <div>
+        {note ? <ScheduleNote note={note} /> : null}
         {content?.map((content, key) =>
           determineContentType(content, dualTrack, key)
         )}
@@ -59,3 +66,15 @@ function determineContentType(content, isDualTrack, key) {
     );
   }
 }
+
+const ScheduleNote = ({ note }) => {
+  return (
+    <div className="border-theme-off-white border-0 mb-4 mt-8 md:mb-6 md:mt-0 bg-theme-off-white text-theme-dark rounded-md flex flex-col xl:flex-row xl:items-center xl:content-center gap-2 md:gap-1 px-4 xl:pt-1 pt-4 pb-4">
+      <p className="p-0 m-0 text-xs md:text-sm lg:text-base -mb-4 flex flex-row gap-2 items-center font-bold">
+        <BsInfoCircleFill aria-hidden={true} />
+        {`Please Note:`}
+      </p>
+      <p className="p-0 m-0 text-xs md:text-sm lg:text-base">{note}</p>
+    </div>
+  );
+};

src/app/lib/components/schedule/ScheduleSection.js

@@ -14,6 +14,7 @@ export const ScheduleSection = ({ day, background }) => {
               background={`${background}`}
               key={"se-" + i}
               title={event.title}
+              note={event.note ?? null}
               link={event.link ?? null}
               startTime={event.startTime}
               endTime={event.endTime}

src/app/lib/components/schedule/bits/MultiEvent.js

@@ -13,22 +13,37 @@ const MultiEvent = ({ content }) => {
           className={`border-x-2 border-y-2 px-2 bg-white`}
           id="content-region"
         >
-          <ul className=" mb-4">
-            {content.items.map((item, key) => (
-              <li key={`me-li-${key}`}>
-                <p className="text-xs md:text-base font-semibold p-0 -mb-2">
-                  {item.title}
-                </p>
-                <p className="text-[0.65rem] md:text-sm leading-relaxed italic p-0 -mt-4">
-                  {item.author}
-                </p>
-              </li>
-            ))}
-          </ul>
+          {content.isNumbered ? (
+            // In this case, we have a list in-which the elements are numbered (voting IDs for example)
+            <ol className="mb-4 list-decimal marker:md:text-base marker:text-xs" start={content.startsFrom ?? 0}>
+              {content.items.map((item, key) => (
+                <ListItem item={item} key={key} />
+              ))}
+            </ol>
+          ) : (
+            <ul className="mb-4">
+              {content.items.map((item, key) => (
+                <ListItem item={item} key={key} />
+              ))}
+            </ul>
+          )}
         </div>
       </Details>
     </div>
   );
 };
 
+const ListItem = ({ item, key }) => {
+  return (
+    <li key={`me-li-${key}`}>
+      <p className="text-xs md:text-base font-semibold p-0 -mb-2">
+        {item.title}
+      </p>
+      <p className="text-[0.65rem] md:text-sm leading-relaxed italic p-0 -mt-4">
+        {item.author}
+      </p>
+    </li>
+  );
+};
+
 export default MultiEvent;