Achievement Unlocked

1"use client"
2 
3import * as React from "react"
4import { CalendarDays, Share2, X } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import {
8  AchievementBadge,
9  type UserAchievement,
10} from "@/components/ui/achievement-badge"
11import { Button } from "@/components/ui/button"
12 
13// Types (inlined - only fields used by this component)
14interface Achievement {
15  id: string
16  name: string
17  trigger?: "metric" | "api" | "streak"
18  description?: string | null
19  unlockedAt?: string
20}
21 
22// Props
23interface AchievementUnlockedProps {
24  /** Achievement that was unlocked */
25  achievement: Achievement
26  /** Control open state */
27  open: boolean
28  /** Callback when open state changes */
29  onOpenChange: (open: boolean) => void
30  /** Label for the secondary action button */
31  secondaryActionLabel?: string
32  /** Callback for the secondary action button (e.g. social share) */
33  onSecondaryActionClick?: () => void
34  /** @deprecated Use onSecondaryActionClick instead */
35  onShare?: () => void
36  /** Custom class for the dialog */
37  className?: string
38}
39 
40const AchievementUnlocked = React.forwardRef<
41  HTMLDivElement,
42  AchievementUnlockedProps
43>(
44  (
45    {
46      achievement,
47      open,
48      onOpenChange,
49      secondaryActionLabel = "Share",
50      onSecondaryActionClick,
51      onShare,
52      className,
53    },
54    ref
55  ) => {
56    const handleSecondaryActionClick = onSecondaryActionClick ?? onShare
57    const unlockedDateLabel = React.useMemo(() => {
58      const input = achievement.unlockedAt ?? new Date().toISOString()
59      const date = new Date(input)
60      if (Number.isNaN(date.getTime())) return "Earned today"
61      return `Earned ${date.toLocaleDateString(undefined, {
62        day: "numeric",
63        month: "short",
64        year: "numeric",
65      })}`
66    }, [achievement.unlockedAt])
67 
68    const badgeAchievement = React.useMemo<UserAchievement>(() => {
69      return {
70        id: achievement.id,
71        name: achievement.name,
72        trigger: achievement.trigger ?? "streak",
73        achievedAt: achievement.unlockedAt ?? new Date().toISOString(),
74      }
75    }, [achievement])
76 
77    // Handle escape key
78    React.useEffect(() => {
79      if (!open) return
80 
81      const handleEscape = (e: KeyboardEvent) => {
82        if (e.key === "Escape") {
83          onOpenChange(false)
84        }
85      }
86 
87      document.addEventListener("keydown", handleEscape)
88      return () => document.removeEventListener("keydown", handleEscape)
89    }, [open, onOpenChange])
90 
91// … truncated