✨ feat: add HoverTooltip for socialicon

Signed-off-by: Zach <i@ssstttar.com>

src/app/(app)/(home)/components/Card.tsx

@@ -2,7 +2,12 @@ import { ReactNode, useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
 
-import { isSupportIcon, SocialIcon } from '~/components/modules/home/SocialIcon'
+import { HoverTooltip } from '~/components/common/HoverTooltip'
+import {
+  getSocialIconName,
+  isSupportIcon,
+  SocialIcon,
+} from '~/components/modules/home/SocialIcon'
 
 import { AnimatedTag } from './AnimatedTag'
 
@@ -89,7 +94,9 @@ export const Card: React.FC<{ children?: ReactNode }> = ({ children }) => {
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.8 }}
             >
-              <SocialIcon id={id} type={type} />
+              <HoverTooltip tooltipText={getSocialIconName(type)}>
+                <SocialIcon id={id} type={type} />
+              </HoverTooltip>
             </motion.li>
           )
         })}
@@ -103,6 +110,6 @@ const socialConfig = {
   x: 'Zach98899',
   github: 'Zach677',
   rss: 'https://ssstttar.com/feed',
-  mail: 'i@ssstttar.com',
+  email: 'i@ssstttar.com',
   // 添加其他社交媒体
 }

src/components/common/HoverTooltip.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react'
+import { motion } from 'framer-motion'
+
+interface HoverTooltipProps {
+  /** 要显示的内容 */
+  children: ReactNode
+  /** 悬停时显示的文本 */
+  tooltipText: string
+  /** 可选的自定义样式类名 */
+  className?: string
+}
+
+export const HoverTooltip: React.FC<HoverTooltipProps> = ({
+  children,
+  tooltipText,
+  className = '',
+}) => {
+  return (
+    <motion.div
+      className={`group relative ${className}`}
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.9 }}
+    >
+      {children}
+      <span className="absolute left-0 right-0 top-full mt-1 text-center text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
+        {tooltipText}
+      </span>
+    </motion.div>
+  )
+}

src/components/modules/home/SocialIcon.tsx

@@ -43,6 +43,9 @@ const iconSet: Record<
 const icons = Object.keys(iconSet)
 
 export const isSupportIcon = (icon: string) => icons.includes(icon)
+export const getSocialIconName = (type: string): string => {
+  return iconSet[type]?.[0] || type.charAt(0).toUpperCase() + type.slice(1)
+}
 export const SocialIcon = memo((props: SocialIconProps) => {
   const { id, type } = props