39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { TrendingUp, CheckCircle, Star } from "lucide-react"
|
|
import { motion } from "motion/react"
|
|
|
|
interface StatsRowProps {
|
|
contributions: number
|
|
verifiedEntries: number
|
|
reputation: number
|
|
}
|
|
|
|
export function StatsRow({ contributions, verifiedEntries, reputation }: StatsRowProps) {
|
|
const stats = [
|
|
{ label: "Contributions", value: contributions, icon: TrendingUp, color: "text-primary" },
|
|
{ label: "Verified", value: verifiedEntries, icon: CheckCircle, color: "text-green-400" },
|
|
{ label: "Reputation", value: reputation, icon: Star, color: "text-accent" },
|
|
]
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="grid grid-cols-3 gap-4"
|
|
>
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.label}
|
|
className="flex flex-col items-center p-4 rounded-xl bg-text/5 border border-border"
|
|
>
|
|
<stat.icon className={`h-5 w-5 ${stat.color} mb-2`} />
|
|
<span className="text-2xl font-bold">{stat.value}</span>
|
|
<span className="text-xs text-text/50">{stat.label}</span>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
)
|
|
}
|