YeonGyu-Kim
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactNode } from "react"
|
|
import { Star, Bot, Download, GitBranch } from "lucide-react"
|
|
import { useLiveStats } from "./live-stats"
|
|
|
|
interface HeroStatsProps {
|
|
initialStats: {
|
|
stars: string
|
|
totalDownloads: string
|
|
monthlyDownloads: string
|
|
weeklyDownloads: string
|
|
}
|
|
labels: {
|
|
githubStars: string
|
|
specializedAgents: string
|
|
totalDownloads: string
|
|
monthlyDownloads: string
|
|
lifecycleHooks: string
|
|
}
|
|
}
|
|
|
|
export function HeroStats({ initialStats, labels }: HeroStatsProps): ReactNode {
|
|
const stats = useLiveStats(initialStats)
|
|
|
|
return (
|
|
<div className="flex flex-wrap justify-center gap-4 text-sm text-zinc-300 md:gap-8 md:text-base">
|
|
<div className="flex items-center gap-2">
|
|
<Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
|
|
<span>{labels.githubStars.replace("{count}", stats.stars)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Bot className="h-5 w-5 text-cyan-400" />
|
|
<span>{labels.specializedAgents}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Download className="h-5 w-5 text-green-400" />
|
|
<span>{labels.totalDownloads.replace("{count}", stats.totalDownloads)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Download className="h-5 w-5 text-emerald-400" />
|
|
<span>{labels.monthlyDownloads.replace("{count}", stats.monthlyDownloads)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<GitBranch className="h-5 w-5 text-purple-400" />
|
|
<span>{labels.lifecycleHooks}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|