Achievement List

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { Trophy } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9interface Achievement {
10  id: string
11  name: string
12  description?: string | null
13  trigger: "metric" | "api" | "streak"
14  badgeUrl?: string | null
15  progress?: number
16  rarity?: number
17}
18 
19interface UserAchievement extends Achievement {
20  achievedAt: string | null
21}
22 
23const achievementListVariants = cva("flex flex-col", {
24  variants: {
25    columns: {
26      2: "",
27      3: "",
28      4: "",
29      auto: "",
30    },
31    gap: {
32      sm: "gap-2",
33      default: "gap-3",
34      lg: "gap-4",
35    },
36  },
37  defaultVariants: {
38    columns: "auto",
39    gap: "default",
40  },
41})
42 
43interface AchievementListProps
44  extends
45    React.HTMLAttributes<HTMLDivElement>,
46    VariantProps<typeof achievementListVariants> {
47  achievements: UserAchievement[]
48  badgeSize?: "sm" | "default" | "lg"
49  lockedStyle?: "grayscale" | "silhouette" | "hidden"
50  onAchievementClick?: (achievement: UserAchievement) => void
51}
52 
53const badgeSizeMap = {
54  sm: "h-10 w-10",
55  default: "h-12 w-12",
56  lg: "h-14 w-14",
57} as const
58 
59const iconSizeMap = {
60  sm: "h-5 w-5",
61  default: "h-6 w-6",
62  lg: "h-7 w-7",
63} as const
64 
65const progressSizeMap = {
66  sm: 42,
67  default: 48,
68  lg: 56,
69} as const
70 
71const AchievementList = React.forwardRef<HTMLDivElement, AchievementListProps>(
72  (
73    {
74      className,
75      columns,
76      gap,
77      achievements,
78      badgeSize = "default",
79      lockedStyle = "grayscale",
80      onAchievementClick,
81      ...props
82    },
83    ref
84  ) => {
85    return (
86      <div ref={ref} className={cn(className)} {...props}>
87        <div
88          role="list"
89          aria-label="Achievements"
90          className={achievementListVariants({ columns, gap })}
91        >
92          {achievements.map((achievement) => {
93            const isUnlocked = achievement.achievedAt !== null
94            const hasProgress =
95              isUnlocked && typeof achievement.progress === "number"
96 
97            if (!isUnlocked && lockedStyle === "hidden") {
98              return null
99            }
100 
101            const progress = hasProgress
102              ? Math.min(100, Math.max(0, achievement.progress ?? 0))
103              : 0
104            const progressSize = progressSizeMap[badgeSize]
105            const progressStroke = 3
106            const progressRadius = (progressSize - progressStroke) / 2
107// … truncated