add member page

src/components/MemberCard.astro

@@ -1,9 +1,9 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import type { Member } from "../store/member"
+import type { PublicMember } from "../store/member"
 import "../styles/global.css"
-const { member } = Astro.props as { member: Member }
+const { member } = Astro.props as { member: PublicMember }
 const avatar = member.avatar;
 ---
 

src/pages/members/index.astro

@@ -0,0 +1,61 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+import { computed } from "vue"
+import MemberCard from "../../components/MemberCard.astro"
+import type { PublicMember } from "../../store/member.ts"
+import { saturdayClient } from "../../utils/client"
+
+const { data: members } = await saturdayClient.GET("/members", { params: {} })
+
+// 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, PublicMember[]>,
+    )
+  return group
+});
+---
+
+  <BaseLayout primaryTitle="关于">
+    <section class="pb-20 bg-[#f5f5f7]">
+      <div class="section-content">
+        <div
+          class="text-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6"
+        >
+          协会成员
+        </div>
+        <div>
+          {
+            Object.keys(memberGroupByYear.value)
+              .sort((a, b) => parseInt(b) - parseInt(a))
+              .map((year) => {
+                return (
+                  <div class="py-4 first:pt-2">
+                    <div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
+                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
+                      {memberGroupByYear.value[year].map(member => (
+                        <MemberCard member={member} />
+                      ))}
+                    </div>
+                  </div>
+                )
+              })
+          }
+        </div>
+      </div>
+    </section>
+  </BaseLayout>