Bottom section of about us

src/components/about/team-members.json

@@ -1,53 +1,62 @@
 [
     {
+        "id": 1,
         "name": "Youssef El Azizi",
         "x_handle": "@ElaziziYoussouf",
         "profile_image": "/about/images/team/yosef.jpg",
         "status": "active"
     },
     {
+        "id": 2,
         "name": "Mohammed Aboullaite",
         "x_handle": "@laytoun",
         "profile_image": "/about/images/team/laytoun.jpg",
         "status": "active"
     },
     {
+        "id": 3,
         "name": "Mriem Zaid",
         "x_handle": "@_iMeriem",
         "profile_image": "/about/images/team/imeriem.jpg",
         "status": "active"
     },
     {
+        "id": 4,
         "name": "Abderrahim SOUBAI-ELIDRISI",
         "x_handle": "@soub4i",
         "profile_image": "/about/images/team/isoubei.jpg",
         "status": "active"
     },
     {
+        "id": 5,
         "name": "Otmane Fettal",
         "x_handle": "@OFettal",
         "profile_image": "/about/images/team/ofettal.jpg",
         "status": "active"
     },
     {
+        "id": 6,
         "name": "Adnan M'RAKCHI",
         "x_handle": "@_admerra",
         "profile_image": "/about/images/team/adnan.jpg",
         "status": "active"
     },
     {
+        "id": 7,
         "name": "Chaimaa BRITEL",
         "x_handle": "@ChaimaaBritel",
         "profile_image": "/about/images/team/britel.jpg",
         "status": "active"
     },
     {
+        "id": 8,
         "name": "Abdelati EL ASRI",
         "x_handle": "@kaizendae",
         "profile_image": "/about/images/team/kaizendae.jpg",
         "status": "active"
     },
     {
+        "id": 9,
         "name": "Soufyan El Foukahi",
         "x_handle": "@soufyanAI",
         "profile_image": "/about/images/team/soufyan.jpg",

src/components/about/team.astro

@@ -1,14 +1,18 @@
 ---
-import teamMembers from "./team-members.json";
 import Member from "./member.astro";
 import type { MemberProps } from "./member.astro";
+import { getCollection } from "astro:content";
 
-const activeMembers = (teamMembers as MemberProps[]).filter(
-  member => member.status === "active"
-);
-const pastMembers = (teamMembers as MemberProps[]).filter(
-  member => member.status === "past"
-);
+const teamCollection = await getCollection("team");
+const teamMembers: MemberProps[] = teamCollection.map(member => ({
+  name: member.data.name,
+  x_handle: member.data.x_handle,
+  profile_image: member.data.profile_image,
+  status: member.data.status,
+}));
+
+const activeMembers = teamMembers.filter(member => member.status === "active");
+const pastMembers = teamMembers.filter(member => member.status === "past");
 ---
 
 <section id="team" class="bg-[#1A1C1E] py-16">

src/content/config.ts

@@ -29,4 +29,8 @@ const gallery = !import.meta.env.PUBLIC_CLOUDINARY_CLOUD_NAME
       }),
     });
 
-export const collections = { podcast, gallery };
+const team = defineCollection({
+  loader: file("src/components/about/team-members.json"),
+});
+
+export const collections = { podcast, gallery, team };