group members by year

src/components/MemberCard.astro

@@ -0,0 +1,24 @@
+---
+// Import the global.css file here so that it is included on
+// all pages through the use of the <BaseHead /> component.
+import "../styles/global.css"
+const { member } = Astro.props
+---
+
+<div class="flex flex-col gap-2 w-full">
+  <div class="w-full rounded-lg overflow-hidden">
+    <div class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70">
+      {
+        member.avatar ? (
+          <img class="object-cover h-full" src={member.avatar} alt="" />
+        ) : (
+          <img class="object-cover h-3/4" src="https://oss.nbtca.space/CA-logo.svg" alt="" />
+        )
+      }
+    </div>
+  </div>
+  <div class="h-16">
+    <div class="text-lg">{member.alias}</div>
+    <div class="text-sm mt-0.5">{member.profile}</div>
+  </div>
+</div>

src/pages/about.astro

@@ -1,32 +1,50 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro"
+import { computed } from "vue"
+import MemberCard from "../components/MemberCard.astro"
 
-const members = await fetch("https://api.nbtca.space/v2/members").then(res => {
+const members: {
+  memberId: string
+  alias: string
+  avatar: string
+  profile: string
+}[] = await fetch("https://api.nbtca.space/v2/members").then(res => {
   return res.json()
 })
+
+// memberId is like "3232323233", the second and third number is the year of the member
+const memberGroupByYear = computed(() => {
+  const group = members
+    // TODO delete the test member
+    .filter(member => member.memberId != "0000000000" && member.memberId != "2333333333")
+    .reduce((acc, cur) => {
+      const year = parseInt("20" + cur.memberId.slice(1, 3))
+      if (!acc[year]) {
+        acc[year] = []
+      }
+      acc[year].push(cur)
+      return acc
+    }, {} as Record<string, typeof members>)
+  return group
+})
 ---
 
 <BaseLayout primaryTitle="关于">
   <section class="pb-20 bg-[#f5f5f7]">
     <div class="section-content">
       <div class="text-[32px] leading-[1.125] font-bold py-6">协会成员</div>
-      <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-6 gap-y-6 md:gap-y-8">
+      <div>
         {
-          members.map(member => {
+          Object.keys(memberGroupByYear.value)
+            .sort((a, b) => parseInt(b) - parseInt(a))
+            .map(year => {
               return (
-              <div class="flex flex-col gap-2 w-full">
+                <div class="py-4 first:pt-2">
-                <div class="w-full rounded-lg overflow-hidden">
+                  <div class="text-[24px] font-bold pb-2">{year}</div>
-                  <div class="w-full aspect-square overflow-hidden flex items-center justify-center  bg-gradient-to-b from-gray-300/70">
+                  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
-                    {member.avatar ? (
+                    {memberGroupByYear.value[year].map(member => (
-                      <img class="object-cover h-full" src={member.avatar} alt="" />
+                      <MemberCard member={member} />
-                    ) : (
+                    ))}
-                      <img class="object-cover h-3/4" src="https://oss.nbtca.space/CA-logo.svg" alt="" />
-                    )}
-                  </div>
-                </div>
-                <div class="h-16">
-                  <div class="text-lg">{member.alias}</div>
-                  <div class="text-sm mt-0.5">{member.profile}</div>
                   </div>
                 </div>
               )