diff --git a/src/app/[lang]/talks/[uniquepage]/Talk.js b/src/app/[lang]/talks/[uniquepage]/Talk.js index 13551b6..ac0c963 100644 --- a/src/app/[lang]/talks/[uniquepage]/Talk.js +++ b/src/app/[lang]/talks/[uniquepage]/Talk.js @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import PropTypes from 'prop-types'; import Image from 'next/image'; @@ -5,6 +7,9 @@ import Link from 'next/link'; import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBullhorn } from '@fortawesome/free-solid-svg-icons'; +import { useI18n } from '@/contexts/I18nContext'; import speakerList from '@/data/speakers.json'; @@ -17,54 +22,64 @@ const Talk = ({ talk, lang }) => { // 'text-border-blue' // ]; const randomColor = (Math.random() * colorBorderSpeaker.length) | 0; + const i18nDictionary = useI18n(); return (
- -
-

{talk.submission}

-

- {talk.title[lang]} -

-
- - - {talk.tags.map((tag) => ( - - {tag} - - ))} - -
- - -
-

Authors

- {talk.speakers.map((speaker) => { - const speakerData = speakerList.find((s) => s.id === speaker); - - return ( - - Speaker Image + + + +
+

+ {talk.title[lang]} +

+ + {' '} + {i18nDictionary?.sections?.talks?.type[talk.submission]} + +
+ + + {talk.tags.map((tag) => ( + + {tag} - ); - })} -
- - -
-

Description

-

{talk.description[lang]}

-
+ ))} + +
+ + +
+

Authors

+ {talk.speakers.map((speaker) => { + const speakerData = speakerList.find((s) => s.id === speaker); + + return ( + + Speaker Image + + ); + })} +
+ + +
+

Description

+

{talk.description[lang]}

+
+ +
diff --git a/src/app/[lang]/talks/components/Card.js b/src/app/[lang]/talks/components/Card.js index c7a4bba..2bf729f 100644 --- a/src/app/[lang]/talks/components/Card.js +++ b/src/app/[lang]/talks/components/Card.js @@ -18,9 +18,9 @@ const Card = ({ talkData, index, lang, langMapping }) => { -

+

{talkData.title[lang]} ({langMapping && langMapping[talkData?.spoken_language]}) -

+ diff --git a/src/app/[lang]/talks/components/Talks.js b/src/app/[lang]/talks/components/Talks.js index 4b9627b..ed71d2f 100644 --- a/src/app/[lang]/talks/components/Talks.js +++ b/src/app/[lang]/talks/components/Talks.js @@ -32,36 +32,42 @@ const Talks = ({ lang, talksList, defaultTag, allTags }) => { - - Filter - { - setTagFilter(e.target.value); - }}> - - {allTags && - allTags.map((tag) => ( - - ))} - - +
+ + {i18nDictionary?.sections?.talks?.filter} + { + setTagFilter(e.target.value); + }}> + + {allTags && + allTags.map((tag) => ( + + ))} + + +
- {talks.map((talk, index) => ( - - - - ))} + + + {talks.map((talk, index) => ( + + + + ))} + +
diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json index 6117725..706b87f 100644 --- a/src/data/dictionaries/en.json +++ b/src/data/dictionaries/en.json @@ -21,7 +21,22 @@ "description": "We are the new voices" }, "talks": { - "title": "Talks" + "title": "Talks", + "filter": "Filter", + "tags": { + "all": "All", + "artificial-intelligence": "Artificial Intelligence", + "core-python": "Core Python", + "data-science": "Data Science", + "machine-learning": "Machine Learning", + "deep-learning": "Deep Learning", + "web-development": "Web Development", + "scientific-computing": "Scientific Computing" + }, + "type": { + "workshop": "Workshop", + "talk": "Talk" + } }, "team": { "title": "Team" diff --git a/src/data/dictionaries/es.json b/src/data/dictionaries/es.json index ffbea30..e9160b4 100644 --- a/src/data/dictionaries/es.json +++ b/src/data/dictionaries/es.json @@ -21,7 +21,19 @@ "description": "Somos las nuevas voces" }, "talks": { - "title": "Ponencias" + "title": "Ponencias", + "filter": "Filtrar", + "tags": { + "all": "Todos", + "artificial-intelligence": "Inteligencia Artificial", + "core-python": "Core Python", + "data-science": "Ciencia de los datos", + "deep-learning": "Deep Learning" + }, + "type": { + "workshop": "Taller", + "talk": "Ponencia" + } }, "team": { "title": "Equipo" diff --git a/src/styles/partials/_general.sass b/src/styles/partials/_general.sass index b9f9c24..749521e 100644 --- a/src/styles/partials/_general.sass +++ b/src/styles/partials/_general.sass @@ -67,6 +67,24 @@ nav font-weight: 300 padding: 20px 0 + .dropdown-menu + padding: 5px + .dropdown-item + padding: 10px 15px + + &:hover + background-color: variables.$purple + border-radius: 8px + +select + background: transparent !important + color: variables.$white !important + border: 2px solid variables.$fuchsia !important + &.form-control + &:focus + box-shadow: none + outline: none + #loader background-color: variables.$main-bg-color color: variables.$main-text-color diff --git a/src/styles/partials/_talk.sass b/src/styles/partials/_talk.sass index 514030f..afd3a54 100644 --- a/src/styles/partials/_talk.sass +++ b/src/styles/partials/_talk.sass @@ -52,6 +52,9 @@ .border-purple border: 10px solid variables.$border-purple +.talk-card + margin: 20px 0 !important + .talk-content .content padding-bottom: 25px @@ -65,3 +68,18 @@ width: auto height: auto margin: 10px + + .talk-type + border: 1px solid variables.$pink + border-radius: 13px + color: variables.$pink + font-size: 20px + font-style: normal + font-weight: 400 + letter-spacing: 2.5px + line-height: 31px + margin: 40px auto + padding: 5px 25px + +.filter-container + margin-bottom: 20px