Achievement Card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { AchievementBadge } from "@/components/ui/achievement-badge"
7import { AchievementList } from "@/components/ui/achievement-list"
8import { Button } from "@/components/ui/button"
9 
10interface Achievement {
11  id: string
12  name: string
13  description?: string | null
14  trigger: "metric" | "api" | "streak"
15  badgeUrl?: string | null
16  progress?: number
17  rarity?: number
18}
19 
20interface UserAchievement extends Achievement {
21  achievedAt: string | null
22}
23 
24interface AchievementCardProps extends React.HTMLAttributes<HTMLDivElement> {
25  achievements: UserAchievement[]
26  highlightedAchievements: UserAchievement[]
27  badgeSize?: "sm" | "default" | "lg"
28  lockedStyle?: "grayscale" | "silhouette" | "hidden"
29  onAchievementClick?: (achievement: UserAchievement) => void
30}
31 
32const AchievementCard = React.forwardRef<HTMLDivElement, AchievementCardProps>(
33  (
34    {
35      className,
36      achievements,
37      highlightedAchievements,
38      badgeSize = "default",
39      lockedStyle = "grayscale",
40      onAchievementClick,
41      ...props
42    },
43    ref
44  ) => {
45    const unlockedCount = achievements.filter(
46      (a) => a.achievedAt !== null
47    ).length
48 
49    return (
50      <div
51        ref={ref}
52        className={cn("bg-card rounded-2xl border p-6 shadow-sm", className)}
53        {...props}
54      >
55        <div className="text-center">
56          <p className="text-7xl font-bold tracking-tight sm:text-8xl">
57            {unlockedCount}
58          </p>
59          <p className="text-muted-foreground mt-1 text-sm font-medium">
60            Badges Unlocked
61          </p>
62        </div>
63 
64        <div className="mt-10 flex items-end justify-center gap-4">
65          {highlightedAchievements.slice(0, 3).map((achievement, index) => (
66            <AchievementBadge
67              key={achievement.id}
68              achievement={achievement}
69              badgeSize="sm"
70              onAchievementClick={onAchievementClick}
71              className={cn(
72                "w-28 border-0 bg-transparent p-0 shadow-none hover:shadow-none",
73                index === 1 ? "-translate-y-2" : "translate-y-1"
74              )}
75            />
76          ))}
77        </div>
78 
79        <div className="mt-10">
80          <div className="mb-3 flex items-center justify-between">
81            <h3 className="text-primary text-sm font-medium">
82              All Achievements
83            </h3>
84// … truncated