feat: show chairmen first

src/components/Members.astro

@@ -5,6 +5,7 @@ import DirectusImg from "./DirectusImg.astro"
 type Member = {
   firstname: string
   image?: string
+  chairman?: boolean
 }
 const members = await directus<Member[]>("items/members?sort=firstname")
 ---
@@ -24,27 +25,59 @@ const members = await directus<Member[]>("items/members?sort=firstname")
   </div>
 </div>
 
+<div class="text-2xl md:text-4xl pt-8">Vorstand</div>
+
 <div
-  class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base pt-8"
+  class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
 >
   {
-    members.map((member) => (
-      <div>
-        <DirectusImg
-          src={
-            member.image != null
-              ? member.image
-              : "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
-          }
-          widths={[200]}
-          format="webp"
-          alt={"Profilbild von " + member.firstname}
-          class="rounded-full w-[100px] h-[100px]"
-        />
+    members
+      .filter((m) => m.chairman)
+      .map((member) => (
+        <div>
+          <DirectusImg
+            src={
+              member.image != null
+                ? member.image
+                : "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
+            }
+            widths={[200]}
+            format="webp"
+            alt={"Profilbild von " + member.firstname}
+            class="rounded-full w-[100px] h-[100px]"
+          />
 
-        <p>{member.firstname}</p>
-      </div>
-    ))
+          <p>{member.firstname}</p>
+        </div>
+      ))
+  }
+</div>
+
+<div class="text-2xl md:text-4xl pt-8">Mitglieder</div>
+
+<div
+  class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
+>
+  {
+    members
+      .filter((m) => !m.chairman)
+      .map((member) => (
+        <div>
+          <DirectusImg
+            src={
+              member.image != null
+                ? member.image
+                : "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
+            }
+            widths={[200]}
+            format="webp"
+            alt={"Profilbild von " + member.firstname}
+            class="rounded-full w-[100px] h-[100px]"
+          />
+
+          <p>{member.firstname}</p>
+        </div>
+      ))
   }
 
   <div>