mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 20:51:49 +00:00
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
const badges = [
|
|
{ name: "Quick Starter", icon: "⚡", earned: true },
|
|
{ name: "Accuracy Master", icon: "🎯", earned: true },
|
|
{ name: "Streak Champion", icon: "🔥", earned: true },
|
|
{ name: "Top Performer", icon: "👑", earned: false },
|
|
{ name: "Community Helper", icon: "🤝", earned: false },
|
|
{ name: "Legendary Worker", icon: "⭐", earned: false },
|
|
]
|
|
|
|
export function BadgeShowcase() {
|
|
return (
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-4">Badges</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
|
|
{badges.map((badge, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-4 text-center transition-all ${
|
|
badge.earned
|
|
? "bg-card/80 backdrop-blur-md border border-border hover:bg-card/90 transition-colors duration-200"
|
|
: "bg-card/50 opacity-50"
|
|
}`}
|
|
>
|
|
<div className="text-3xl mb-2">{badge.icon}</div>
|
|
<p className="text-xs font-medium">{badge.name}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|