Merge pull request #113 from PyConColombia/issue-107

#107 Cambiar UI para ajustar tamanos

src/app/[lang]/schedule/components/Event.js

@@ -1,10 +1,15 @@
 import Link from 'next/link';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
+import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-const Event = ({ talk, event, type, size, lang }) => {
+const Event = ({ talk, event, speakers, type, size, lang, index }) => {
   return (
-    <Col xs={12} md={type !== 'talk' ? 12 : size} className="event">
+    <Col
+      xs={12}
+      md={type !== 'talk' ? 12 : size}
+      className={`event ${(index + 1) % 3 === 0 ? 'no-border' : ''}`}>
       <Row>
         <Col xs={12}>
           <div className="event-title">
@@ -25,13 +30,6 @@ const Event = ({ talk, event, type, size, lang }) => {
           </Col>
         )}
 
-        <Col xs={12}>
-          {talk.title && (
-            <div className="event-title">
-              <Link href={`/${lang}/talks/${talk.id}`}>{talk.title[lang]}</Link>
-            </div>
-          )}
-        </Col>
         {talk.title && (
           <Col xs={12}>
             <div className="event-title">
@@ -40,13 +38,29 @@ const Event = ({ talk, event, type, size, lang }) => {
           </Col>
         )}
 
+        {speakers && (
+          <Col xs={12}>
+            <div className="event-speakers">
+              {speakers.map((speaker) => (
+                <div key={speaker.id} className="event-speaker">
+                  <Link href={`/${lang}/speakers/${speaker.id}`}>
+                    {speaker.first_name} {speaker.last_name}
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </Col>
+        )}
+
         {talk?.spoken_language && event?.room && (
           <>
             <Col xs={12} md={6} className="event-description right">
               {talk?.spoken_language}
             </Col>
             <Col xs={12} md={6} className="event-description left">
-              <span>{event?.room || ''}</span>
+              <span>
+                <FontAwesomeIcon icon={faLocationDot} /> {event?.room || ''}
+              </span>
             </Col>
           </>
         )}

src/app/[lang]/schedule/components/Events.js

@@ -4,11 +4,15 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Event from './Event';
 
-const Events = ({ order, lang, talksList }) => {
+const Events = ({ order, lang, talksList, speakersList }) => {
   const getTalkById = (id) => {
     return talksList.find((talk) => talk.id === id);
   };
 
+  const getSpeakersByIds = (ids) => {
+    return speakersList.filter((speaker) => (ids || []).includes(speaker.id));
+  };
+
   return (
     <Row className="justify-content-center">
       <Col xs={12}>
@@ -21,17 +25,20 @@ const Events = ({ order, lang, talksList }) => {
                 className={`event-container ${order.type}`}>
                 <h3 className="event-hour">{order.hour}</h3>
                 <Row>
-                  {order.events.map((event) => {
+                  {order.events.map((event, index) => {
                     const talk = getTalkById(event.event_id) || {};
+                    const speakers = getSpeakersByIds(talk.speakers);
 
                     return (
                       <Event
-                        key={event.event_id}
+                        key={index}
                         talk={talk}
                         event={event}
+                        speakers={speakers}
                         type={order.type}
                         size={event.title ? '6' : '4'}
                         lang={lang}
+                        index={index}
                       />
                     );
                   })}
@@ -60,8 +67,6 @@ Events.propTypes = {
     github: propTypes.string,
     website: propTypes.string
   }),
-  reverse: propTypes.bool,
-  index: propTypes.number,
   lang: propTypes.string
 };
 

src/app/[lang]/schedule/components/Schedule.js

@@ -5,13 +5,15 @@ import propTypes from 'prop-types';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
+import { faCircleArrowRight, faCircleArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Events from '@/app/[lang]/schedule/components/Events';
 import Title from '@/app/[lang]/schedule/components/Title';
 
 import { useI18n } from '@/contexts/I18nContext';
 
-const Schedule = ({ lang, scheduleData, talksList }) => {
+const Schedule = ({ lang, scheduleData, talksList, speakersList }) => {
   const i18nDictionary = useI18n();
   const [currentDate, setCurrentDate] = useState('');
   const [currentOrder, setCurrentOrder] = useState([]);
@@ -56,22 +58,37 @@ const Schedule = ({ lang, scheduleData, talksList }) => {
             <Col xs={12} md={10} className="schedule-container">
               <Row>
                 <Col>
-                  <h2>
-                    {new Date(currentDate).toLocaleString('en-US', {
-                      month: 'long',
-                      day: 'numeric',
-                      zone: 'UTC-5'
-                    })}
-                  </h2>
+                  {currentDate && (
+                    <h2>
+                      {new Date(currentDate).toLocaleDateString(lang === 'en' ? 'en-US' : 'es-CO', {
+                        weekday: 'long',
+                        month: 'long',
+                        day: 'numeric'
+                      })}
+                    </h2>
+                  )}
                 </Col>
                 <Col className="d-flex justify-content-end">
-                  {previousDate && <button onClick={onClickPrevious}>Previous</button>}
-                  {nextDate && <button onClick={onClickNext}>Next</button>}
+                  {previousDate && (
+                    <a className="previous-button" onClick={onClickPrevious}>
+                      <FontAwesomeIcon icon={faCircleArrowLeft} /> Previous day
+                    </a>
+                  )}
+                  {nextDate && (
+                    <a className="next-button" onClick={onClickNext}>
+                      Next day <FontAwesomeIcon icon={faCircleArrowRight} />
+                    </a>
+                  )}
                 </Col>
               </Row>
               <Row>
                 <Col>
-                  <Events order={currentOrder} lang={lang} talksList={talksList} />
+                  <Events
+                    order={currentOrder}
+                    lang={lang}
+                    talksList={talksList}
+                    speakersList={speakersList}
+                  />
                 </Col>
               </Row>
             </Col>

src/app/[lang]/schedule/page.js

@@ -3,6 +3,7 @@ import propTypes from 'prop-types';
 import Schedule from './components/Schedule';
 
 import talksList from '@/data/talks.json';
+import speakersList from '@/data/speakers.json';
 import scheduleData from '@/data/schedule.json';
 
 import en from '@/data/dictionaries/en.json';
@@ -19,7 +20,14 @@ export async function generateMetadata({ params: { lang } }, parent) {
 }
 
 const Page = ({ params: { lang } }) => {
-  return <Schedule lang={lang} scheduleData={scheduleData} talksList={talksList} />;
+  return (
+    <Schedule
+      lang={lang}
+      scheduleData={scheduleData}
+      talksList={talksList}
+      speakersList={speakersList}
+    />
+  );
 };
 
 Page.propTypes = {

src/data/schedule.json

@@ -1,7 +1,7 @@
 [
   {
-    "date": "2024-06-07",
-    "next_date": "2024-06-08",
+    "date": "2024/06/07",
+    "next_date": "2024/06/08",
     "order": [
       {
         "hour": "08:00",
@@ -195,9 +195,9 @@
     ]
   },
   {
-    "date": "2024-06-08",
-    "next_date": "2024-06-09",
-    "previous_date": "2024-06-07",
+    "date": "2024/06/08",
+    "next_date": "2024/06/09",
+    "previous_date": "2024/06/07",
     "order": [
       {
         "hour": "08:00",
@@ -377,8 +377,8 @@
     ]
   },
   {
-    "date": "2024-06-09",
-    "previous_date": "2024-06-08",
+    "date": "2024/06/09",
+    "previous_date": "2024/06/08",
     "order": [
       {
         "hour": "10:00",

src/styles/partials/_schedule.sass

@@ -6,6 +6,13 @@
     border-radius: 30px
     padding: 40px 30px
 
+    .previous-button, .next-button
+        color: variables.$fuchsia
+        font-size: 20px
+        font-weight: 500
+        cursor: pointer
+        padding: 0 10px
+
     .event-container
         border: 1px solid variables.$white
         border-radius: 10px
@@ -27,6 +34,8 @@
             border-right: 1px solid variables.$white
             &:last-child
                 border-right: none
+            &.no-border
+                border-right: none
 
         .talk-card
             overflow-x: hidden
@@ -43,5 +52,12 @@
             font-size: 17px
         .event-title
             font-size: 15px
+            line-height: 20px
+            a
+                color: variables.$white
+        .event-speaker
+            font-size: 15px
+            line-height: 12px
+            margin: 10px 0
         .event-description
             font-size: 13px