Achievement Badge

1"use client"
2 
3import * as React from "react"
4import { Trophy } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8interface Achievement {
9  id: string
10  name: string
11  trigger: "metric" | "api" | "streak"
12  badgeUrl?: string | null
13  progress?: number
14  rarity?: number
15}
16 
17interface UserAchievement extends Achievement {
18  /** ISO date when earned, or `null` if locked */
19  achievedAt: string | null
20}
21 
22interface AchievementBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
23  achievement: UserAchievement
24  badgeSize?: "sm" | "default" | "lg" | "xl"
25  onAchievementClick?: (achievement: UserAchievement) => void
26}
27 
28const badgeSizeMap = {
29  sm: "h-12 w-12",
30  default: "h-16 w-16",
31  lg: "h-20 w-20",
32  xl: "h-28 w-28",
33} as const
34 
35const iconSizeMap = {
36  sm: "h-8 w-8",
37  default: "h-10 w-10",
38  lg: "h-12 w-12",
39  xl: "h-16 w-16",
40} as const
41 
42const progressRingSizeMap = {
43  sm: 72,
44  default: 88,
45  lg: 104,
46  xl: 136,
47} as const
48 
49const AchievementBadge = React.forwardRef<
50  HTMLDivElement,
51  AchievementBadgeProps
52>(
53  (
54    {
55      className,
56      achievement,
57      badgeSize = "default",
58      onAchievementClick,
59      ...props
60    },
61    ref
62  ) => {
63    const isUnlocked = achievement.achievedAt !== null
64 
65    const hasProgress = isUnlocked && typeof achievement.progress === "number"
66    const progress = hasProgress
67      ? Math.min(100, Math.max(0, achievement.progress ?? 0))
68      : 0
69    const hasRarity = typeof achievement.rarity === "number"
70    const rarity = hasRarity
71      ? Math.min(100, Math.max(1, Math.round(achievement.rarity ?? 1)))
72      : null
73    const ringSize = progressRingSizeMap[badgeSize]
74    const ringStrokeWidth = 4
75    const ringRadius = (ringSize - ringStrokeWidth) / 2
76    const ringCircumference = 2 * Math.PI * ringRadius
77    const ringDashoffset =
78      ringCircumference - (progress / 100) * ringCircumference
79 
80    const statusLabel = isUnlocked ? "Earned" : "Locked"
81    const itemLabel = `${achievement.name} - ${statusLabel}`
82 
83    return (
84      <div
85        ref={ref}
86        role={onAchievementClick ? "button" : "listitem"}
87        aria-label={onAchievementClick ? itemLabel : undefined}
88        tabIndex={onAchievementClick ? 0 : undefined}
89        onClick={() => onAchievementClick?.(achievement)}
90        onKeyDown={
91          onAchievementClick
92            ? (e) => {
93                if (e.key === "Enter" || e.key === " ") {
94                  e.preventDefault()
95                  onAchievementClick(achievement)
96// … truncated