mzaxdandClaude
cae5686d2d
新增 GitHub 统计卡片和徽章组件，在项目卡片、详情页和侧边栏中展示 GitHub stars、forks 等统计数据 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
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>
|
|
)
|
|
}
|