diff --git a/src/app/[lang]/schedule/components/Event.js b/src/app/[lang]/schedule/components/Event.js index bae73ba..b523cb6 100644 --- a/src/app/[lang]/schedule/components/Event.js +++ b/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 ( - +
@@ -25,13 +30,6 @@ const Event = ({ talk, event, type, size, lang }) => { )} - - {talk.title && ( -
- {talk.title[lang]} -
- )} - {talk.title && (
@@ -40,13 +38,29 @@ const Event = ({ talk, event, type, size, lang }) => { )} + {speakers && ( + +
+ {speakers.map((speaker) => ( +
+ + {speaker.first_name} {speaker.last_name} + +
+ ))} +
+ + )} + {talk?.spoken_language && event?.room && ( <> {talk?.spoken_language} - {event?.room || ''} + + {event?.room || ''} + )} diff --git a/src/app/[lang]/schedule/components/Events.js b/src/app/[lang]/schedule/components/Events.js index 7e70e56..00a8b1d 100644 --- a/src/app/[lang]/schedule/components/Events.js +++ b/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 ( @@ -21,17 +25,20 @@ const Events = ({ order, lang, talksList }) => { className={`event-container ${order.type}`}>

{order.hour}

- {order.events.map((event) => { + {order.events.map((event, index) => { const talk = getTalkById(event.event_id) || {}; + const speakers = getSpeakersByIds(talk.speakers); return ( ); })} @@ -60,8 +67,6 @@ Events.propTypes = { github: propTypes.string, website: propTypes.string }), - reverse: propTypes.bool, - index: propTypes.number, lang: propTypes.string }; diff --git a/src/app/[lang]/schedule/components/Schedule.js b/src/app/[lang]/schedule/components/Schedule.js index 74c073e..d55cd17 100644 --- a/src/app/[lang]/schedule/components/Schedule.js +++ b/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 }) => { -

- {new Date(currentDate).toLocaleString('en-US', { - month: 'long', - day: 'numeric', - zone: 'UTC-5' - })} -

+ {currentDate && ( +

+ {new Date(currentDate).toLocaleDateString(lang === 'en' ? 'en-US' : 'es-CO', { + weekday: 'long', + month: 'long', + day: 'numeric' + })} +

+ )} - {previousDate && } - {nextDate && } + {previousDate && ( + + Previous day + + )} + {nextDate && ( + + Next day + + )}
- + diff --git a/src/app/[lang]/schedule/page.js b/src/app/[lang]/schedule/page.js index 5852e8c..c96a5e2 100644 --- a/src/app/[lang]/schedule/page.js +++ b/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 ; + return ( + + ); }; Page.propTypes = { diff --git a/src/data/schedule.json b/src/data/schedule.json index ba7e2de..a217824 100644 --- a/src/data/schedule.json +++ b/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", diff --git a/src/styles/partials/_schedule.sass b/src/styles/partials/_schedule.sass index e70a82f..97c9142 100644 --- a/src/styles/partials/_schedule.sass +++ b/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