#97 Agregar ponencia para cada perfil de speaker

src/app/[lang]/speakers/[uniquepage]/Speakers.js

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Image from 'next/image';
@@ -6,14 +8,17 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faGlobe, faBullhorn } from '@fortawesome/free-solid-svg-icons';
 import {
   faXTwitter,
   faLinkedinIn,
   faGithubAlt,
   faFacebook,
   faGitlab
 } from '@fortawesome/free-brands-svg-icons';
+import { useI18n } from '@/contexts/I18nContext';
+
+import Link from 'next/link';
 
 const Speakers = ({ speaker, talks, lang }) => {
   const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue'];
@@ -24,6 +29,7 @@ const Speakers = ({ speaker, talks, lang }) => {
   //   'text-border-blue'
   // ];
   const randomColor = (Math.random() * colorBorderSpeaker.length) | 0;
+  const i18nDictionary = useI18n();
 
   return (
     <section id="keynote">
@@ -61,12 +67,6 @@ const Speakers = ({ speaker, talks, lang }) => {
                 {speaker.biography ? <p>{speaker.biography[lang]}</p> : null}
               </div>
             </Col>
-            {/* <h3>Talks</h3>
-            {talks.map((talk) => (
-              <Link key={talk.id} href={`/talks/${talk.id}`} locale={lang}>
-                <h1>{talk.title[lang]}</h1>
-              </Link>
-            ))} */}
           </Row>
           <Row className="justify-content-center">
             {/* <Col xs={12} md={5}>
@@ -139,6 +139,23 @@ const Speakers = ({ speaker, talks, lang }) => {
               </div>
             </Col>
           </Row>
+          <Row>
+            <Col xs={12}>
+              <div className="talks-container">
+                <span className="talk-type">
+                  <FontAwesomeIcon icon={faBullhorn} /> {i18nDictionary?.sections?.talks?.type.talk}{' '}
+                  / {i18nDictionary?.sections?.talks?.type.workshop}
+                </span>
+                {talks.map((talk) => (
+                  <div key={talk.id} className="talk-wrapper">
+                    <Link href={`/talks/${talk.id}`} locale={lang}>
+                      <h4>{talk.title[lang]}</h4>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </Col>
+          </Row>
         </Container>
       </div>
     </section>

src/data/dictionaries/en.json

@@ -31,7 +31,13 @@
         "machine-learning": "Machine Learning",
         "deep-learning": "Deep Learning",
         "web-development": "Web Development",
-        "scientific-computing": "Scientific Computing"
+        "scientific-computing": "Scientific Computing",
+        "community": "Community",
+        "business-analytics": "Business Analytics",
+        "soft-skills": "Soft Skills",
+        "business-alignment": "Business Alignment",
+        "web": "Web",
+        "devops": "DevOps"
       },
       "type": {
         "workshop": "Workshop",

src/data/dictionaries/es.json

@@ -27,8 +27,17 @@
         "all": "Todos",
         "artificial-intelligence": "Inteligencia Artificial",
         "core-python": "Core Python",
-        "data-science": "Ciencia de los datos",
-        "deep-learning": "Deep Learning"
+        "data-science": "Ciencia de datos",
+        "machine-learning": "Aprendizaje de Maquinas",
+        "deep-learning": "Aprendizaje profundo",
+        "web-development": "Desarrollo Web",
+        "scientific-computing": "Computación Científica",
+        "community": "Comunidad",
+        "business-analytics": "Análisis de negocios",
+        "soft-skills": "Habilitaciones Blandas",
+        "business-alignment": "Alineamiento de Negocios",
+        "web": "Web",
+        "devops": "DevOps"
       },
       "type": {
         "workshop": "Taller",

src/styles/partials/_general.sass

@@ -80,6 +80,8 @@ select
     background: transparent !important
     color: variables.$white !important
     border: 2px solid variables.$fuchsia !important
+    &:hover
+        cursor: pointer
     &.form-control
         &:focus
             box-shadow: none

src/styles/partials/_keynotes.sass

@@ -121,6 +121,22 @@
                     color: variables.$fuchsia
                     cursor: pointer
 
+    .talks-container
+        padding: 40px 0
+        .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
+        .talk-wrapper
+            margin: 20px 0
+
 // Colors
 .pink
     color: variables.$border-pink