added team page

Author: brauliodiez

front/src/app/equipo/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import { EquipoPod } from "@/pods/equipo";
 
 export const metadata: Metadata = {
   title: "Equipo - InfoEmbalses",
@@ -11,6 +12,7 @@ const EquipoPage = () => {
         <img src="/images/logo.svg" alt="InfoEmbalses logo" className="w-64" />
         <p className="text-xl font-semibold">InfoEmbalses Versión Beta</p>
         <h1 className="text-3xl font-bold">Equipo de desarrollo</h1>
+        <EquipoPod />
       </div>
     </div>
   );

front/src/pods/equipo/api/equipo.api-model.ts

@@ -0,0 +1,10 @@
+import type { Media } from "@content-island/api-client";
+
+export interface Developer {
+  id: string;
+  language: "es";
+  lastUpdate: string;
+  fullname: string;
+  picture: Media;
+  linkedin: string;
+}

front/src/pods/equipo/api/equipo.api.ts

@@ -0,0 +1,20 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+import type { Developer } from "./equipo.api-model";
+import { contentIslandClient } from "@/lib";
+
+export const getDeveloperListCached = unstable_cache(
+  async (): Promise<Developer[]> => {
+    try {
+      return await contentIslandClient.getContentList<Developer>({
+        contentType: "developer",
+        language: "es",
+      });
+    } catch (error) {
+      console.warn("Warning: developer list not available");
+      return [];
+    }
+  },
+  ["developer-list"],
+  { revalidate: 60 }
+);

front/src/pods/equipo/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./equipo.api";
+export type { Developer } from "./equipo.api-model";

front/src/pods/equipo/equipo.component.tsx

@@ -0,0 +1,28 @@
+import type { Developer } from "./api";
+
+interface Props {
+  developers: Developer[];
+}
+
+export const EquipoComponent: React.FC<Props> = ({ developers }) => {
+  return (
+    <div className="flex flex-wrap justify-center gap-8">
+      {developers.map((dev) => (
+        <a
+          key={dev.id}
+          href={dev.linkedin}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center gap-2"
+        >
+          <img
+            src={dev.picture.url}
+            alt={dev.fullname}
+            className="h-24 w-24 rounded-full border-2 border-accent object-cover"
+          />
+          <span className="text-sm font-medium">{dev.fullname}</span>
+        </a>
+      ))}
+    </div>
+  );
+};

front/src/pods/equipo/equipo.pod.tsx

@@ -0,0 +1,7 @@
+import { getDeveloperListCached } from "./api";
+import { EquipoComponent } from "./equipo.component";
+
+export const EquipoPod: React.FC = async () => {
+  const developers = await getDeveloperListCached();
+  return <EquipoComponent developers={developers} />;
+};

front/src/pods/equipo/index.ts

@@ -0,0 +1 @@
+export { EquipoPod } from "./equipo.pod";