feat: add friden links

src/components/Footer/index.tsx

@@ -9,9 +9,11 @@ import { recordOpenInfoPanelAction } from '@/utils'
 import { useAtom } from 'jotai'
 import type React from 'react'
 import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 import IconMail from '~icons/material-symbols/mail'
 import IconCoffee2 from '~icons/mdi/coffee'
 import IconXiaoHongShu from '~icons/my-icons/xiaohongshu'
+import RiLinksLine from '~icons/ri/links-line'
 import IconTwitter from '~icons/ri/twitter-fill'
 import IconGithub from '~icons/simple-icons/github'
 import IconVisualstudiocode from '~icons/simple-icons/visualstudiocode'
@@ -23,6 +25,7 @@ import IconFlagChina from '~icons/twemoji/flag-china'
 
 const Footer: React.FC = () => {
   const [infoPanelState, setInfoPanelState] = useAtom(infoPanelStateAtom)
+  const navigate = useNavigate()
 
   const handleOpenInfoPanel = useCallback(
     (modalType: InfoPanelType) => {
@@ -209,6 +212,9 @@ const Footer: React.FC = () => {
         >
           <IconMail fontSize={16} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
         </a>
+        <a rel="noreferrer" className="cursor-pointer focus:outline-none" onClick={() => navigate('/friend-links')} aria-label="查看友链">
+          <RiLinksLine fontSize={14} className="text-gray-500 hover:text-indigo-400 dark:text-gray-400 dark:hover:text-indigo-400" />
+        </a>
 
         <Tooltip content="中国大陆镜像">
           <a href="https://kaiyiwing.gitee.io/qwerty-learner" target="_self" title="前往中国大陆镜像">

src/index.tsx

@@ -1,6 +1,7 @@
 import Loading from './components/Loading'
 import './index.css'
 import { ErrorBook } from './pages/ErrorBook'
+import { FriendLinks } from './pages/FriendLinks'
 import MobilePage from './pages/Mobile'
 import TypingPage from './pages/Typing'
 import { isOpenDarkModeAtom } from '@/store'
@@ -58,6 +59,7 @@ function Root() {
                 <Route path="/gallery" element={<GalleryPage />} />
                 <Route path="/analysis" element={<AnalysisPage />} />
                 <Route path="/error-book" element={<ErrorBook />} />
+                <Route path="/friend-links" element={<FriendLinks />} />
                 <Route path="/*" element={<Navigate to="/" />} />
               </>
             )}

src/pages/FriendLinks/index.tsx

@@ -0,0 +1,65 @@
+import Layout from '../../components/Layout'
+import ezbdc from '@/assets/friendlinks/ezbdc.jpg'
+import kk from '@/assets/friendlinks/kk.jpg'
+import web_worker from '@/assets/friendlinks/web-worker.png'
+import type React from 'react'
+
+export const FriendLinks: React.FC = () => {
+  const links = [
+    {
+      title: 'ez背单词',
+      href: 'https://ezbdc.dashu.ai',
+      imgSrc: ezbdc,
+      description: '一款极简的英文单词学习应用，可以非常方便高效地学习英文，具有有挑战性的单词背诵模式，无需注册，下载即用',
+    },
+    {
+      title: 'Kai',
+      href: 'https://kaiyi.cool/',
+      imgSrc: kk,
+      description: 'Kai 的个人博客，记录了一些技术文章，生活感悟，以及一些有趣的小项目',
+    },
+    {
+      title: 'Web Worker-前端程序员都爱听',
+      href: 'https://www.xiaoyuzhoufm.com/podcast/613753ef23c82a9a1ccfdf35',
+      imgSrc: web_worker,
+      description:
+        'Web Worker 播客是几个前端程序员闲聊的前端中文音频播客节目。节目围绕程序员领域瞎聊，聊资讯、聊职场、聊技术选型……只要是和 web 开发有关的都可以聊。',
+    },
+  ]
+
+  return (
+    <Layout>
+      <div className="flex w-full flex-1 flex-col items-center px-4 pt-20">
+        <div className="flex w-full max-w-md flex-grow flex-col items-center">
+          <div className="mt-5 text-center text-lg font-bold">友情链接</div>
+          <div className="links flex w-full flex-col items-center gap-y-8 py-5">
+            {links.map((link, index) => (
+              <a
+                key={index}
+                title={link.title}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="linkItem flex w-full items-center overflow-hidden"
+              >
+                <div className="mr-3 flex h-8 w-8 flex-shrink-0 items-center justify-center bg-gray-200">
+                  <img src={link.imgSrc} alt={link.title} className="h-full w-full object-cover" />
+                </div>
+                <div className="flex-1">
+                  <div className="pb-1 text-sm font-bold">{link.title}</div>
+                  <div className="text-xs text-gray-500">{link.description}</div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+        <div className="mt-auto pb-5 text-center text-sm text-gray-500">
+          想要添加友链？请联系邮箱：
+          <a href="mailto:[email protected]" className="text-blue-500">
+            [email protected]
+          </a>
+        </div>
+      </div>
+    </Layout>
+  )
+}