Merge pull request #230 from posadev/agenda

fix datimes

Author: Yaidi

src/components/agenda/AgendaHeader.tsx

@@ -27,12 +27,12 @@ const AgendaHeader = () => {
                   </ul>
               </Card>
               <div className="flex md:flex-row flex-col gap-10 justify-center items-center md:items-baseline text-primary-500 mt-[72px]">
-                  <AgendaItem time={'9:00 AM - 3:00 PM'} title={'Registro'} icon={IdCardLanyard } />
-                  <AgendaItem time={'9:30am - 11:00am'} title={'Coffee break'} icon={Coffee} />
-                  <AgendaItem time={'10:15 AM - 2:00 PM y 3:55 PM - 7:00 PM'} title={'Charlas'} icon={Megaphone} />
-                  <AgendaItem time={'2:05 PM - 3:55 PM'} title={'Comida'} icon={HandPlatter} />
-                  <AgendaItem time={'7:00 PM - 9:00 PM'} title={'Networking'} icon={CandyCane} />
-                  <AgendaItem time={'7:00 PM - 9:00 PM'} title={'Clausura'} icon={Beer} />
+                  <AgendaItem time={['9:00 AM - 3:00 PM']} title={'Registro'} icon={IdCardLanyard } />
+                  <AgendaItem time={['9:30am - 11:00am']} title={'Coffee break'} icon={Coffee} />
+                  <AgendaItem time={['10:15 AM - 2:00 PM','3:55 PM - 7:00 PM']} title={'Charlas'} icon={Megaphone} />
+                  <AgendaItem time={['2:05 PM - 3:55 PM']} title={'Comida'} icon={HandPlatter} />
+                  <AgendaItem time={['7:00 PM - 9:00 PM']} title={'Networking'} icon={CandyCane} />
+                  <AgendaItem time={['7:00 PM - 9:00 PM']} title={'Clausura'} icon={Beer} />
               </div>
           </aside>
       </>

src/components/agenda/AgendaItem.tsx

@@ -1,17 +1,34 @@
-const AgendaItem = ({ icon: Icon, title, time }) => {
-    const [start, end] = time.split(" - ");
+import React from "react";
+
+interface AgendaItemProps {
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    title: string;
+    time: Array<string>;
+}
+
+const AgendaItem: React.FC<AgendaItemProps> = ({ icon: Icon, title, time }) => {
+
+    const splitTime = (timeString: string) => {
+        const [start, end] = timeString.split(" - ");
+        return { start, end };
+    }
+    const isSingleTime = time.length === 1;
 
     return (
       <aside className="flex flex-col items-center text-center gap-2 w-[180px] hover:scale-105 transition-transform">
       <span className="h-14 w-14 border-2 border-primary-500 flex items-center justify-center">
         {Icon && <Icon className="h-6 w-6 text-primary-500" />}
       </span>
             <p className="font-medium text-primary-800">{title}</p>
-          <time className="flex flex-col items-center text-primary-600 text-sm leading-tight">
-              <span>{start}</span>
-              {end && <span className="text-xs">-</span>}
-              <span>{end}</span>
-          </time>
+          {
+              time.map((timeString, index) => (
+                  <time key={`time-${index}`} className={`flex ${isSingleTime ? "flex-col" : "flex-row flex-wrap gap-2"} items-center text-primary-600 text-sm leading-tight`}>
+                      <span>{splitTime(timeString).start}</span>
+                      {splitTime(timeString).end && <span className="text-xs">-</span>}
+                      <span>{splitTime(timeString).end}</span>
+                  </time>
+              ))
+          }
         </aside>
     )
 }