Points Levels Timeline

1"use client"
2 
3import * as React from "react"
4import { Star } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8export interface PointsSubLevelTimeline {
9  name: string
10  points: number
11}
12 
13export interface PointsLevelTimeline {
14  id: string
15  key?: string
16  name: string
17  description?: string
18  badgeUrl?: string | null
19  points: number
20  subLevels?: PointsSubLevelTimeline[]
21}
22 
23interface PointsLevelsTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
24  levels: PointsLevelTimeline[]
25  currentPoints?: number
26  currentLevelLabel?: string
27  formatPoints?: (value: number) => string
28}
29 
30function formatRangeLabel(
31  points: number,
32  nextLevelPoints: number | null | undefined,
33  formatPoints?: (value: number) => string
34) {
35  const format = formatPoints ?? ((value: number) => value.toLocaleString())
36  if (typeof nextLevelPoints === "number") {
37    return `${format(points)} - ${format(nextLevelPoints - 1)} XP`
38  }
39  return `${format(points)}+ XP`
40}
41 
42const PointsLevelsTimeline = React.forwardRef<
43  HTMLDivElement,
44  PointsLevelsTimelineProps
45>(
46  (
47    {
48      className,
49      levels,
50      currentPoints,
51      currentLevelLabel = "Current",
52      formatPoints,
53      ...props
54    },
55    ref
56  ) => {
57    const hasTracking = typeof currentPoints === "number"
58    const safeTotalPoints = hasTracking ? Math.max(0, currentPoints) : null
59 
60    const currentLevelIndex = React.useMemo(() => {
61      if (!hasTracking || safeTotalPoints === null || levels.length === 0)
62        return -1
63      for (let i = levels.length - 1; i >= 0; i -= 1) {
64        if (safeTotalPoints >= levels[i].points) return i
65      }
66      return -1
67    }, [hasTracking, levels, safeTotalPoints])
68 
69    const clampedCurrentProgress = React.useMemo(() => {
70      if (currentLevelIndex < 0 || safeTotalPoints === null) return 0
71      if (levels.length <= 1 || currentLevelIndex >= levels.length - 1)
72        return 100
73 
74      const currentPointsThreshold = levels[currentLevelIndex].points
75      const nextPointsThreshold = levels[currentLevelIndex + 1].points
76      const segmentSize = Math.max(
77        1,
78        nextPointsThreshold - currentPointsThreshold
79      )
80      const progressInSegment = safeTotalPoints - currentPointsThreshold
81      return Math.max(0, Math.min((progressInSegment / segmentSize) * 100, 100))
82    }, [currentLevelIndex, levels, safeTotalPoints])
83 
84    const progressHeightPercent = React.useMemo(() => {
85      if (currentLevelIndex < 0) return 0
86// … truncated