-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #98 from PyConColombia/issue-97
#97 Crear listado de charlas con informacion
- Loading branch information
Showing
16 changed files
with
529 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Image from 'next/image'; | ||
| import Link from 'next/link'; | ||
| import Container from 'react-bootstrap/Container'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import Col from 'react-bootstrap/Col'; | ||
|
|
||
| import speakerList from '@/data/speakers.json'; | ||
|
|
||
| const Talk = ({ talk, lang }) => { | ||
| const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue']; | ||
| // const colorBorderTextSpeaker = [ | ||
| // 'text-border-pink', | ||
| // 'text-border-yellow', | ||
| // 'text-border-purple', | ||
| // 'text-border-blue' | ||
| // ]; | ||
| const randomColor = (Math.random() * colorBorderSpeaker.length) | 0; | ||
|
|
||
| return ( | ||
| <section id="keynote"> | ||
| <div className="keynote-bg talk-content"> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={12}> | ||
| <div className="title-container"> | ||
| <h1>{talk.submission}</h1> | ||
| <h2 className="title"> | ||
| <span className="bold">{talk.title[lang]}</span> | ||
| </h2> | ||
| </div> | ||
| </Col> | ||
| <Col xs={12}> | ||
| {talk.tags.map((tag) => ( | ||
| <Link key={tag} href={`/${lang}/talks/tags/${tag}`}> | ||
| <span className={`badge default ${tag}`}>{tag}</span> | ||
| </Link> | ||
| ))} | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col xs={12}> | ||
| <div className="content content-left"> | ||
| <h3>Authors</h3> | ||
| {talk.speakers.map((speaker) => { | ||
| const speakerData = speakerList.find((s) => s.id === speaker); | ||
|
|
||
| return ( | ||
| <Link key={speaker} href={`/${lang}/${speakerData.type}s/${speakerData.id}`}> | ||
| <Image | ||
| className={`img-keynote ${colorBorderSpeaker[randomColor]}`} | ||
| src={`/images/${speakerData.type}/${speakerData.photo}`} | ||
| alt="Speaker Image" | ||
| width={300} | ||
| height={300} | ||
| /> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| </Col> | ||
| <Col xs={12}> | ||
| <div className="content content-left"> | ||
| <h3>Description</h3> | ||
| <p>{talk.description[lang]}</p> | ||
| </div> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| Talk.propTypes = { | ||
| speaker: PropTypes.object, | ||
| talks: PropTypes.array, | ||
| lang: PropTypes.string | ||
| }; | ||
|
|
||
| export default Talk; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
| import Link from 'next/link'; | ||
| import propTypes from 'prop-types'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import Col from 'react-bootstrap/Col'; | ||
| import Image from 'next/image'; | ||
|
|
||
| import speakerList from '@/data/speakers.json'; | ||
|
|
||
| const Card = ({ talkData, index, lang, langMapping }) => { | ||
| const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue']; | ||
|
|
||
| const getSpeakerData = (id) => { | ||
| return speakerList.find((speaker) => speaker.id === id); | ||
| }; | ||
|
|
||
| return ( | ||
| <Row className="keynote-card talk-card justify-content-center"> | ||
| <Col xs={12}> | ||
| <Link href={`/${lang}/talks/${talkData.id}`}> | ||
| <h3> | ||
| {talkData.title[lang]} ({langMapping && langMapping[talkData?.spoken_language]}) | ||
| </h3> | ||
| </Link> | ||
| </Col> | ||
| <Col xs={12}> | ||
| {talkData.tags.map((tag) => ( | ||
| <Link key={tag} href={`/${lang}/talks/tags/${tag}`}> | ||
| <span className={`badge default ${tag}`}>{tag}</span> | ||
| </Link> | ||
| ))} | ||
| </Col> | ||
| <Col xs={12}> | ||
| {talkData.speakers.map((speaker) => { | ||
| const speakerData = getSpeakerData(speaker); | ||
|
|
||
| return ( | ||
| <Link | ||
| key={`${talkData.id}-${speaker.id}`} | ||
| href={`/${lang}/${speakerData.type}s/${speakerData.id}`}> | ||
| <Image | ||
| className={`img-keynote img-speaker-talk ${colorBorderSpeaker[(index + 1) % colorBorderSpeaker.length]}`} | ||
| src={`/images/${speakerData.type}/${speakerData.photo}`} | ||
| alt="Speaker Image" | ||
| width={300} | ||
| height={300} | ||
| /> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| Card.propTypes = { | ||
| talkData: propTypes.shape({ | ||
| id: propTypes.number, | ||
| first_name: propTypes.string, | ||
| last_name: propTypes.string, | ||
| biography: propTypes.shape({}), | ||
| photo: propTypes.string, | ||
| type: propTypes.string, | ||
| country_origin: propTypes.string, | ||
| facebook: propTypes.string, | ||
| twitter: propTypes.string, | ||
| linkedin: propTypes.string, | ||
| github: propTypes.string, | ||
| website: propTypes.string | ||
| }), | ||
| reverse: propTypes.bool, | ||
| index: propTypes.number, | ||
| lang: propTypes.string | ||
| }; | ||
|
|
||
| export default Card; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| 'use client'; | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import propTypes from 'prop-types'; | ||
| import Container from 'react-bootstrap/Container'; | ||
| import Form from 'react-bootstrap/Form'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import Col from 'react-bootstrap/Col'; | ||
|
|
||
| import Card from '@/app/[lang]/talks/components/Card'; | ||
| import Title from '@/app/[lang]/talks/components/Title'; | ||
|
|
||
| import { useI18n } from '@/contexts/I18nContext'; | ||
|
|
||
| const Talks = ({ lang, talksList, defaultTag, allTags }) => { | ||
| const i18nDictionary = useI18n(); | ||
| const [tagFilter, setTagFilter] = useState(defaultTag || 'all'); | ||
| const [talks, setTalks] = useState(talksList); | ||
|
|
||
| useEffect(() => { | ||
| if (tagFilter === 'all') { | ||
| setTalks(talksList); | ||
| } else { | ||
| setTalks(talksList.filter((talk) => talk.tags.includes(tagFilter))); | ||
| } | ||
| }, [tagFilter, talksList]); | ||
|
|
||
| return ( | ||
| <section id="keynotes"> | ||
| <div className="keynotes-bg"> | ||
| <Title content={i18nDictionary?.sections?.talks} /> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={12} md={4}> | ||
| <Form.Group controlId="formBasicSelect"> | ||
| <Form.Label>Filter</Form.Label> | ||
| <Form.Control | ||
| as="select" | ||
| value={tagFilter} | ||
| onChange={(e) => { | ||
| setTagFilter(e.target.value); | ||
| }}> | ||
| <option value="all">All</option> | ||
| {allTags && | ||
| allTags.map((tag) => ( | ||
| <option key={tag} value={tag}> | ||
| {tag} | ||
| </option> | ||
| ))} | ||
| </Form.Control> | ||
| </Form.Group> | ||
| </Col> | ||
| </Row> | ||
| <Row className="justify-content-center"> | ||
| {talks.map((talk, index) => ( | ||
| <Col xs={12} md={6} key={talk.id}> | ||
| <Card | ||
| talkData={talk} | ||
| index={index} | ||
| lang={lang} | ||
| langMapping={i18nDictionary?.languages} | ||
| /> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Container> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| Talks.propTypes = { | ||
| lang: propTypes.string | ||
| }; | ||
|
|
||
| export default Talks; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import propTypes from 'prop-types'; | ||
| import Container from 'react-bootstrap/Container'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import Col from 'react-bootstrap/Col'; | ||
|
|
||
| const Title = ({ content }) => { | ||
| return ( | ||
| <div className="welcome"> | ||
| <div className="welcome-bg"> | ||
| <Container> | ||
| <Row className="justify-content-center"> | ||
| <Col xs={10} md={6}> | ||
| <div className="title-container"> | ||
| <h2 className="title"> | ||
| <span className="bold">{content?.title}</span> | ||
| </h2> | ||
| </div> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| Title.propTypes = { | ||
| content: propTypes.object | ||
| }; | ||
|
|
||
| export default Title; |
Oops, something went wrong.