feat: 添加 GitHub 统计数据展示功能

新增 GitHub 统计卡片和徽章组件，在项目卡片、详情页和侧边栏中展示 GitHub stars、forks 等统计数据 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-30 14:14:02 +08:00
parent 443dc8370e
commit cae5686d2d
12 changed files with 1766 additions and 41 deletions
@@ -0,0 +1,74 @@
+import Image from 'next/image'
+
+interface GitHubBadgesProps {
+  starsUrl?: string | null
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizes = {
+  sm: { width: 80, height: 20 },
+  md: { width: 100, height: 20 },
+  lg: { width: 120, height: 20 }
+}
+
+/**
+ * GitHub Stars 徽章组件 - 显示 GitHub Stars 数量
+ * 适用于项目详情页
+ */
+export function GitHubBadges({
+  starsUrl,
+  size = 'md',
+  className = ''
+}: GitHubBadgesProps) {
+  if (!starsUrl) {
+    return null
+  }
+
+  const { width, height } = sizes[size]
+
+  return (
+    <div className={className}>
+      <Image
+        src={starsUrl}
+        alt="GitHub Stars"
+        width={width}
+        height={height}
+        unoptimized
+        className="hover:opacity-80 transition-opacity rounded"
+      />
+    </div>
+  )
+}
+
+/**
+ * GitHub Stars 紧凑型组件 - 用于项目卡片
+ * 在较小的空间内显示 GitHub Stars 数量
+ */
+export function GitHubStatsCompact({
+  starsUrl,
+  className = ''
+}: {
+  starsUrl?: string | null
+  className?: string
+}) {
+  if (!starsUrl) {
+    return null
+  }
+
+  return (
+    <div className={`flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 ${className}`}>
+      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
+      </svg>
+      <Image
+        src={starsUrl}
+        alt="Stars"
+        width={60}
+        height={20}
+        unoptimized
+        className="rounded"
+      />
+    </div>
+  )
+}