<script setup lang="ts">
const friends = [
  {
    name: '合肥市南园学校微信公众号',
    image: '/NanYuanAll.svg',
    link: 'http://weixin.qq.com/q/02cC4owWLUc221MpxdhA9d',
  },
  {
    name: 'thehrz',
    image: 'https://thehrz.net/thehrz.jpg',
    link: 'https://thehrz.net',
  },
  {
    name: '金卫东同志博客',
    image: '',
    link: 'https://blog.sina.com.cn/u/1259127853',
  },
]
</script>

<template>
  <section class="text-center">
    <div class="i-carbon-friendship text-4xl -mb-6 m-auto" />
    <h3>友链</h3>
  </section>

  <div class="grid grid-cols-2 md:grid-cols-4 grid-gap-6 not-prose">
    <v-card v-for="friend in friends" :key="friend.name" :href="friend.link" target="_blank">
      <v-img :src="friend.image" class="w-60% mx-auto mt-3" />

      <div class="mx-3 flex justify-center items-center h-15">
        <p class="text-center text-4" v-text="friend.name" />
      </div>
    </v-card>
  </div>
</template>
