Ajustar vista de equipo

PyConColombia · May 7, 2024 · d468dbe · d468dbe
1 parent 0f5ac62
commit d468dbe
Show file tree

Hide file tree

Showing 11 changed files with 363 additions and 87 deletions.
diff --git a/public/images/team/alejandro-rendon.jpg b/public/images/team/alejandro-rendon.jpg
diff --git a/public/images/team/maria-franco.JPEG b/public/images/team/maria-franco.JPEG
diff --git a/src/app/[lang]/team/[uniquepage]/TeamMember.js b/src/app/[lang]/team/[uniquepage]/TeamMember.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Image from 'next/image';
+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 { faCircle, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import {
+  faXTwitter,
+  faLinkedinIn,
+  faGithubAlt,
+  faFacebook,
+  faGitlab
+} from '@fortawesome/free-brands-svg-icons';
+
+const TeamMember = ({ teamMember, 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">
+        <Container>
+          <Row className="justify-content-center">
+            <Col xs={12}>
+              <div className="image-wrapper">
+                <Image
+                  className={`img-keynote ${colorBorderSpeaker[randomColor]}`}
+                  src={`/images/team/${teamMember.photo}`}
+                  alt="Speaker Image"
+                  width={300}
+                  height={300}
+                />
+              </div>
+            </Col>
+            <Col xs={12} md={8}>
+              <div className="name">
+                <h3 className={`keynote-title`}>
+                  <span className="bold">
+                    {teamMember.first_name} {teamMember.last_name}
+                  </span>
+                  {teamMember.country_origin && (
+                    <span className="flag">
+                      {' '}
+                      <span className={`fi fi-${teamMember.country_origin}`}></span>
+                    </span>
+                  )}
+                </h3>
+              </div>
+            </Col>
+            <Col xs={12} md={8}>
+              <div className="biography">
+                {teamMember.biography ? <p>{teamMember.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}>
+              <div>
+                <span className={`text-border ${colorBorderTextSpeaker[randomColor]}`}>
+                  <FontAwesomeIcon icon={faCalendarAlt} /> The new age in fintech | 4 Junio 2024
+                </span>
+              </div>
+            </Col> */}
+            <Col xs={12} md={3}>
+              <div className={`social-icons`}>
+                {teamMember.facebook && (
+                  <a
+                    href={`https://www.facebook.com/${teamMember.facebook}`}
+                    target="_blank"
+                    rel="noreferrer">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faFacebook} />
+                    </div>
+                  </a>
+                )}
+                {teamMember.twitter && (
+                  <a
+                    href={`https://twitter.com/${teamMember.twitter}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faXTwitter} />
+                    </div>
+                  </a>
+                )}
+                {teamMember.linkedin && (
+                  <a
+                    href={`https://www.linkedin.com/in/${teamMember.linkedin}`}
+                    target="_blank"
+                    rel="noreferrer">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faLinkedinIn} />
+                    </div>
+                  </a>
+                )}
+                {teamMember.github && (
+                  <a
+                    href={`https://github.com/${teamMember.github}`}
+                    target="_blank"
+                    rel="noreferrer">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faGithubAlt} />
+                    </div>
+                  </a>
+                )}
+                {teamMember.gitlab && (
+                  <a
+                    href={`https://gitlab.com/${teamMember.gitlab}`}
+                    target="_blank"
+                    rel="noreferrer">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faGitlab} />
+                    </div>
+                  </a>
+                )}
+                {teamMember.website && (
+                  <a href={teamMember.website} target="_blank" rel="noreferrer">
+                    <div className="fa-stack">
+                      <FontAwesomeIcon className="fa-stack-2x" icon={faCircle} color="white" />
+                      <FontAwesomeIcon className="social-icon fa-stack-1x" icon={faGlobe} />
+                    </div>
+                  </a>
+                )}
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </section>
+  );
+};
+
+TeamMember.propTypes = {
+  teamMember: PropTypes.object,
+  talks: PropTypes.array,
+  lang: PropTypes.string
+};
+
+export default TeamMember;
diff --git a/src/app/[lang]/team/[uniquepage]/page.js b/src/app/[lang]/team/[uniquepage]/page.js
@@ -1,64 +1,57 @@
 import React from 'react';
 import propTypes from 'prop-types';
-import Image from 'next/image';
-import Link from 'next/link';
-import teamlist from '@/data/team.json';
-import Avatar from '@/app/[lang]/team/images/avatar.jpeg';
+import { notFound } from 'next/navigation';
+
+import teamMemberlist from '@/data/team.json';
+import en from '@/data/dictionaries/en.json';
+import es from '@/data/dictionaries/es.json';
+import TeamMember from './TeamMember';
 
 export async function generateStaticParams() {
-  return teamlist.map((p) => ({
+  return teamMemberlist.map((p) => ({
     uniquepage: p.id.toString()
   }));
 }
 
-const Team = ({ params: { uniquepage, lang } }) => {
-  const teamMember = teamlist.find((p) => p.id.toString() === uniquepage);
+export async function generateMetadata({ params: { uniquepage, lang } }, parent) {
+  const dataLang = lang === 'en' ? en : es;
+  const dataSection = dataLang?.sections;
+  const teamMembersData = dataSection.team;
+  const teamMemberData = teamMemberlist.find((p) => p.id.toString() === uniquepage);
+
+  return {
+    title: `${teamMemberData.first_name} ${teamMemberData.last_name} | ${teamMembersData.title}`,
+    description: `${teamMemberData.biography[lang]}`,
+    openGraph: {
+      title: `${teamMemberData.first_name} ${teamMemberData.last_name} | ${teamMembersData.title}`,
+      images: [
+        {
+          url: `/images/team/${teamMemberData.photo}`,
+          width: 200,
+          height: 200
+        }
+      ],
+      description: `${teamMemberData.biography[lang]}`
+    }
+  };
+}
+
+const Page = ({ params: { uniquepage, lang } }) => {
+  const teamMember = teamMemberlist.find((p) => p.id.toString() === uniquepage);
+
+  if (!teamMember) {
+    console.info('teamMember not found');
+    notFound();
+  }
 
-  return (
-    <>
-      <Image src={Avatar} width={200} height={200} placeholder="blur" alt="Picture of the author" />
-      <h1>
-        {teamMember.first_name} {teamMember.last_name}
-      </h1>
-      <h2>{teamMember.affiliation}</h2>
-      <h3>{teamMember.country_residence}</h3>
-      <ul>
-        <li>
-          <Link href={teamMember.facebook} target="_blank">
-            {teamMember.facebook}
-          </Link>
-        </li>
-        <li>
-          <Link href={teamMember.twitter} target="_blank">
-            {teamMember.twitter}
-          </Link>
-        </li>
-        <li>
-          <Link href={teamMember.linkedin} target="_blank">
-            {teamMember.linkedin}
-          </Link>
-        </li>
-        <li>
-          <Link href={teamMember.github} target="_blank">
-            {teamMember.github}
-          </Link>
-        </li>
-        <li>
-          <Link href={teamMember.website} target="_blank">
-            {teamMember.website}
-          </Link>
-        </li>
-      </ul>
-      {teamMember.biography ? <p>{teamMember.biography[lang]}</p> : null}
-    </>
-  );
+  return <TeamMember teamMember={teamMember} lang={lang} />;
 };
 
-Team.propTypes = {
+Page.propTypes = {
   params: propTypes.shape({
     uniquepage: propTypes.string,
     lang: propTypes.string
   })
 };
 
-export default Team;
+export default Page;
diff --git a/src/app/[lang]/team/components/Card.js b/src/app/[lang]/team/components/Card.js
@@ -0,0 +1,62 @@
+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';
+
+const Card = ({ teamMemberData, reverse, index, lang }) => {
+  const colorBorderSpeaker = ['border-pink', 'border-yellow', 'border-purple', 'border-blue'];
+
+  return (
+    <Row className="keynote-card justify-content-center">
+      <Col xs={12}>
+        <div className="speaker-img-wrapper">
+          <Link href={`/${lang}/team/${teamMemberData.id}`}>
+            <Image
+              className={`img-keynote ${colorBorderSpeaker[(index + 1) % colorBorderSpeaker.length]}`}
+              src={`/images/team/${teamMemberData.photo}`}
+              alt="Speaker Image"
+              width={300}
+              height={300}
+            />
+          </Link>
+          <div className={`keynote-title ${reverse ? 'text-right' : 'text-left'}`}>
+            <span className="bold">
+              {teamMemberData.first_name} {teamMemberData.last_name}
+            </span>
+            {teamMemberData.country_origin && (
+              <span className="flag">
+                {' '}
+                <span className={`fi fi-${teamMemberData.country_origin}`}></span>
+              </span>
+            )}
+          </div>
+          {/* <p>{teamMemberData.talk.title[lang]}</p> */}
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+Card.propTypes = {
+  teamMemberData: propTypes.shape({
+    id: propTypes.string,
+    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;
diff --git a/src/app/[lang]/team/components/Team.js b/src/app/[lang]/team/components/Team.js
@@ -0,0 +1,40 @@
+'use client';
+
+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';
+import teamlist from '@/data/team.json';
+
+import Card from '@/app/[lang]/team/components/Card';
+import Title from '@/app/[lang]/team/components/Title';
+
+import { useI18n } from '@/contexts/I18nContext';
+
+const Team = ({ lang }) => {
+  const i18nDictionary = useI18n();
+
+  return (
+    <section id="keynotes">
+      <div className="keynotes-bg">
+        <Title content={i18nDictionary?.sections?.team} />
+        <Container>
+          <Row className="justify-content-center">
+            {teamlist.map((teamMember, index) => (
+              <Col xs={12} md={4} key={teamMember.id}>
+                <Card teamMemberData={teamMember} index={index} lang={lang} />
+              </Col>
+            ))}
+          </Row>
+        </Container>
+      </div>
+    </section>
+  );
+};
+
+Team.propTypes = {
+  lang: propTypes.string
+};
+
+export default Team;