Add dynamic team member imports

package.json

@@ -20,7 +20,8 @@
     "astro-icon": "^0.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^6.7.5",

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from "astro:assets";
+import COPSLogo from "../assets/images/cops_logo.png";
 ---
 
 <footer
@@ -36,8 +37,8 @@ import { Image } from "astro:assets";
         >
           <Image
             class="logo-camera"
-            src="/images/cops_logo.png"
-            alt="COPS logo"
+            src={COPSLogo}
+            alt="COPS Logo"
             width={100}
             height={100}
           />

src/components/team/Collaborators.astro

@@ -1,9 +1,9 @@
 ---
 import { Image } from "astro:assets";
-import CollabImg from "../../../public/images/collaborators.svg";
+import CollaboratorsImage from "../../assets/images/collaborators.svg";
 ---
 
-<div class="flex flex-col items-center justify-center mt-28">
+<div class="flex flex-col items-center justify-center">
   <h1 class="text-6xl font-bold text-white">Collaborators</h1>
-  <Image src={CollabImg} alt="collaborators" class="mt-20" />
+  <Image src={CollaboratorsImage} alt="collaborators" class="mt-12" />
 </div>

src/components/team/TeamMemberCard.astro

@@ -0,0 +1,86 @@
+---
+import { Icon } from "astro-icon";
+import type { TeamMemberInterface } from "../../pages/team.astro";
+
+interface Props extends TeamMemberInterface {}
+
+const member = Astro.props;
+const socialKeys = [
+  "github",
+  "gmail",
+  "linkedin",
+  "twitter",
+  "instagram",
+] as const;
+---
+
+<div class="w-96 border-4 border-[#0077CC] rounded-lg bg-white mt-32">
+  <img
+    src=`../src/assets/images/team/${member.image}`
+    class="w-96 h-96"
+    height={96}
+    width={96}
+    alt=`A picture of ${member.name}`
+  />
+  <div class="px-7">
+    <!-- Member Name -->
+    <div>
+      <a href={member.portfolio || "#"}>
+        <h1 class="text-2xl text-[#00101B] my-5 font-bold">{member.name}</h1>
+      </a>
+      <hr />
+    </div>
+
+    <!-- Member Description -->
+    <div>
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        About
+      </h1>
+      <p class="font-sm opacity-70">{member.description}</p>
+    </div>
+
+    <div>
+      <!-- Member Skills -->
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        Skills
+      </h1>
+      <div class="gap-2 flex flex-row flex-wrap">
+        {
+          member.skills.map((skill) => (
+            <div class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2">
+              {skill}
+            </div>
+          ))
+        }
+      </div>
+
+      <!-- Social Links Component -->
+      <h1 class="text-[#00101B] opacity-60 font-bold text-sm my-4">
+        Let's Connect
+      </h1>
+      <div class="flex flex-row mb-4">
+        {
+          socialKeys.map((key) =>
+            member.socials[key] ? (
+              <a href={member.socials[key]}>
+                <Icon pack="mdi" name={key} class="h-[30px] mr-4" />
+              </a>
+            ) : null,
+          )
+        }
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="css">
+  [astro-icon="linkedin"] {
+    color: #00101b;
+  }
+  [astro-icon="mail"] {
+    color: #00101b;
+  }
+  [astro-icon="big-x"] {
+    color: #00101b;
+  }
+</style>

src/data/team.json

@@ -1,14 +1,16 @@
 [
   {
     "name": "Eshaan Aggarwal",
-    "github": "https://github.com/EshaanAgg",
+    "image": "EshaanAgg.jpg",
     "role": "maintainer",
+    "description": "I love making software break.",
+    "skills": ["Go", "Rust", "TypeScript"],
     "socials": {
-      "linkedIn": "",
-      "twitter": "",
-      "instagram": "",
-      "portfolio": ""
+      "github": "https://github.com/EshaanAgg",
+      "linkedin": "https://www.linkedin.com/in/eshaan-aggarwal",
+      "gmail": "mailto:[email protected]",
+      "twitter": "https://twitter.com/eshaanagg"
     },
-    "description": ""
+    "portfolio": "https://eshaanagg.netlify.app"
   }
 ]

src/pages/team.astro

@@ -1,17 +1,44 @@
 ---
+import { z } from "zod";
+import Layout from "../layouts/Layout.astro";
 import Collaborators from "../components/team/Collaborators.astro";
-import TeamsCard from "../components/team/TeamsCard.astro";
+import TeamMemberCard from "../components/team/TeamMemberCard.astro";
+import MemberDetails from "../data/team.json";
+
+// Enforce the validation of the member data from the JSON
+const memberZod = z.object({
+  name: z.string().min(5).max(30),
+  role: z.enum(["maintainer", "core-team", "collaborator"]),
+  description: z.string().min(10).max(100),
+  skills: z.string().array().min(1).max(5),
+  image: z.string(),
+  socials: z.object({
+    github: z.string().url(),
+    gmail: z.string().url().optional(),
+    linkedin: z.string().url().optional(),
+    twitter: z.string().url().optional(),
+    instagram: z.string().url().optional(),
+  }),
+  portfolio: z.string().url().optional(),
+});
+export type TeamMemberInterface = z.infer<typeof memberZod>;
+
+const membersZod = z.array(memberZod);
+membersZod.parse(MemberDetails);
 ---
 
-<div class="flex flex-col items-center justify-center bg-[#00101B] px-32">
-  <Collaborators />
-  <div class="flex flex-col items-center justify-center pb-20">
-    <h1 class="text-white text-5xl font-bold pt-32">Our Team</h1>
-    <div class="flex flex-row items-center justify-center flex-wrap gap-x-10">
-      <TeamsCard />
-      <TeamsCard />
-      <TeamsCard />
-      <TeamsCard />
+<Layout title="Team">
+  <div class="flex flex-col items-center justify-center bg-[#00101B] px-32">
+    <Collaborators />
+    <div class="flex flex-col items-center justify-center pb-20">
+      <h1 class="text-white text-5xl font-bold pt-32">Our Team</h1>
+      <div class="flex flex-row items-center justify-center flex-wrap gap-x-10">
+        {
+          (MemberDetails as TeamMemberInterface[]).map(
+            (member: TeamMemberInterface) => <TeamMemberCard {...member} />,
+          )
+        }
+      </div>
     </div>
   </div>
-</div>
+</Layout>