From 3eb2d83abc4186f166faa10e92c19d8431f96e24 Mon Sep 17 00:00:00 2001
From: thehrz <thehrz@outlook.com>
Date: Fri, 4 Aug 2023 19:04:23 +0800
Subject: [PATCH] feat: add friends

---
 src/components.d.ts    |  2 ++
 src/components/Nav.vue |  4 ++++
 src/pages/friends.vue  | 31 +++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/pages/friends.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 2cfd9e9..0be5849 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,8 @@ declare module 'vue' {
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VBtn: typeof import('vuetify/components')['VBtn']
     VCard: typeof import('vuetify/components')['VCard']
+    VCardTitle: typeof import('vuetify/components')['VCardTitle']
+    VContainer: typeof import('vuetify/components')['VContainer']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 78659d6..124e3ff 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -12,6 +12,10 @@ const pages = [
     title: '文章',
     page: '/posts',
   },
+  {
+    title: '友链',
+    page: '/friends',
+  },
   {
     title: '关于',
     page: '/about',
diff --git a/src/pages/friends.vue b/src/pages/friends.vue
new file mode 100644
index 0000000..3dd052a
--- /dev/null
+++ b/src/pages/friends.vue
@@ -0,0 +1,31 @@
+<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',
+  },
+]
+</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">
+    <v-card v-for="friend in friends" :key="friend.name" :href="friend.link">
+      <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 not-prose" v-text="friend.name" />
+      </div>
+    </v-card>
+  </div>
+</template>