<template>
  <UPageSection title="名人堂">
    <div class="grid md:grid-cols-4 gap-6">
      <div
        v-for="person in persons"
        :key="person.id"
        class="flex flex-col items-center cursor-pointer transition hover:scale-105 hover:drop-shadow-2xl hover:-translate-y-1"
        @click="jumpToPersonIntro(person.path)"
      >
        <img
          :src="person.photo"
          :alt="person.name"
          class="w-40 rounded-full border-primary border-4"
        />
        <h4 class="text-lg font-bold">{{ person.name }}</h4>
        <p class="text-sm text-gray-500">{{ person.title }}</p>
      </div>
    </div>
  </UPageSection>
</template>

<script lang="ts" setup>
const { data: persons } = await useAsyncData("hall-of-fames", () =>
  queryCollection("hallOfFames").limit(4).all()
);

var router = useRouter();
const jumpToPersonIntro = (path: string) => {
  router.push(path);
};
</script>

<style></style>
