FUJI/src/pages/about.astro

---
import BaseLayout from "../layouts/BaseLayout.astro"
import { computed } from "vue"
import MemberCard from "../components/MemberCard.astro"
import { type Member, otherMembers } from "../store/member.ts"

const members: Member[] = 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, Member[]>,
    )
  group["往届"] = otherMembers
  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>