Crear vista generica para equipo

package.json

@@ -28,6 +28,6 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.1.1",
-    "sass": "^1.69.6"
+    "sass": "^1.70.0"
   }
 }

src/app/[lang]/page.js

@@ -1,9 +1,5 @@
 import React from 'react';
 
 export default async function Page({ lang }) {
-  return (
-    <>
-      <button>test</button>
-    </>
-  );
+  return <h1>PyCon Colombia</h1>;
 }

src/app/[lang]/team/[uniquepage]/page.js

@@ -0,0 +1,64 @@
+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]/speakers/images/avatar.jpeg';
+
+export async function generateStaticParams() {
+  return teamlist.map((p) => ({
+    uniquepage: p.id.toString()
+  }));
+}
+
+const Team = ({ params: { uniquepage, lang } }) => {
+  const teamMember = teamlist.find((p) => p.id.toString() === uniquepage);
+
+  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}
+    </>
+  );
+};
+
+Team.propTypes = {
+  params: propTypes.shape({
+    uniquepage: propTypes.string,
+    lang: propTypes.string
+  })
+};
+
+export default Team;

src/app/[lang]/team/page.js

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+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';
+
+const Speakers = ({ params: { lang } }) => {
+  return (
+    <>
+      {teamList.map((team) => (
+        <Row key={team.id}>
+          <Col md={4}>
+            <Link href={`/${lang}/team/${team.id}`} locale={lang}>
+              <Image src={Avatar} width={200} height={200} alt="Picture of the author" />
+            </Link>
+          </Col>
+          <Col md={8}>
+            <Link href={`/${lang}/team/${team.id}`} locale={lang}>
+              <h1>
+                {team.first_name} {team.last_name}
+              </h1>
+              <h2>{team.affiliation}</h2>
+            </Link>
+            <Link href={`https://twitter.com/${team.twitter}`} target="_blank">
+              <span>{team.twitter}</span>
+            </Link>
+          </Col>
+        </Row>
+      ))}
+    </>
+  );
+};
+
+Speakers.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default Speakers;

src/data/team.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "john-doe",
+    "team": "website",
+    "first_name": "John",
+    "last_name": "Doe",
+    "email": "[email protected]",
+    "photo": "https://i.pravatar.cc/300",
+    "biography": {
+      "en": "I am John Doe. I am an amazing speaker.",
+      "es": "Yo soy John Doe. Soy un gran orador."
+    },
+    "affiliation": "Acme Inc.",
+    "facebook": "https://www.facebook.com/johndoe",
+    "twitter": "@johndoe",
+    "linkedin": "https://www.linkedin.com/in/johndoe",
+    "github": "https://github.com/johndoe",
+    "website": "https://johndoe.com"
+  }
+]