Achievement Grid

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7import { AchievementBadge } from "@/components/ui/achievement-badge"
8 
9// Types (inlined - only fields used by this component)
10interface Achievement {
11  id: string
12  name: string
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 // null = locked
21}
22 
23// Variants
24const achievementGridVariants = cva("grid", {
25  variants: {
26    columns: {
27      2: "grid-cols-2",
28      3: "grid-cols-3",
29      4: "grid-cols-4",
30      auto: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
31    },
32    gap: {
33      sm: "gap-2",
34      default: "gap-4",
35      lg: "gap-6",
36    },
37  },
38  defaultVariants: {
39    columns: "auto",
40    gap: "default",
41  },
42})
43 
44// Badge size mapping
45// Props
46interface AchievementGridProps
47  extends
48    React.HTMLAttributes<HTMLDivElement>,
49    VariantProps<typeof achievementGridVariants> {
50  /** Array of achievements */
51  achievements: UserAchievement[]
52  /** Size of achievement badges */
53  badgeSize?: "sm" | "default" | "lg"
54  /** Callback when achievement clicked */
55  onAchievementClick?: (achievement: UserAchievement) => void
56}
57 
58const AchievementGrid = React.forwardRef<HTMLDivElement, AchievementGridProps>(
59  (
60    {
61      className,
62      columns,
63      gap,
64      achievements,
65      badgeSize = "default",
66      onAchievementClick,
67      ...props
68    },
69    ref
70  ) => {
71    return (
72      <div
73        ref={ref}
74        role="list"
75        aria-label="Achievements"
76        className={cn(achievementGridVariants({ columns, gap }), className)}
77        {...props}
78      >
79        {achievements.map((achievement) => {
80          return (
81            <AchievementBadge
82              key={achievement.id}
83              achievement={achievement}
84              badgeSize={badgeSize}
85              onAchievementClick={onAchievementClick}
86            />
87          )
88        })}
89      </div>
90    )
91  }
92)
93AchievementGrid.displayName = "AchievementGrid"
94 
95export { AchievementGrid, achievementGridVariants }
96export type { AchievementGridProps, Achievement, UserAchievement }