Points Levels List

1"use client"
2 
3import * as React from "react"
4import {
5  BadgeCheck,
6  Medal,
7  Shield,
8  ShieldCheck,
9  ShieldHalf,
10  Sparkles,
11  Trophy,
12  type LucideIcon,
13} from "lucide-react"
14 
15import { cn } from "@/lib/utils"
16 
17export type PointsLevelListIconType =
18  | "beginner"
19  | "novice"
20  | "intermediate"
21  | "professional"
22  | "expert"
23  | "master"
24  | "grand-master"
25  | "enlightened"
26 
27export interface PointsSubLevelList {
28  name: string
29  points: number
30}
31 
32export interface PointsLevelList {
33  id: string
34  key?: string
35  name: string
36  description?: string
37  badgeUrl?: string | null
38  points: number
39  iconType?: PointsLevelListIconType
40  subLevels?: PointsSubLevelList[]
41}
42 
43interface PointsLevelsListProps extends React.HTMLAttributes<HTMLDivElement> {
44  levels: PointsLevelList[]
45  currentPoints?: number
46  showProgressBar?: boolean
47  currentLevelLabel?: string
48  formatPoints?: (value: number) => string
49}
50 
51const pointsLevelListIconMap: Record<PointsLevelListIconType, LucideIcon> = {
52  beginner: Shield,
53  novice: ShieldHalf,
54  intermediate: BadgeCheck,
55  professional: ShieldCheck,
56  expert: Medal,
57  master: Trophy,
58  "grand-master": Trophy,
59  enlightened: Sparkles,
60}
61 
62function formatRange(
63  points: number,
64  nextLevelPoints: number | null | undefined,
65  formatPoints?: (value: number) => string
66) {
67  const format = formatPoints ?? ((value: number) => value.toLocaleString())
68  if (typeof nextLevelPoints === "number") {
69    return `${format(points)}-${format(nextLevelPoints - 1)}`
70  }
71  return `${format(points)}+`
72}
73 
74const PointsLevelsList = React.forwardRef<
75  HTMLDivElement,
76  PointsLevelsListProps
77>(
78  (
79    {
80      className,
81      levels,
82      currentPoints,
83      showProgressBar = false,
84      currentLevelLabel = "Your current level",
85      formatPoints,
86      ...props
87    },
88    ref
89  ) => {
90    const currentLevelIndex =
91      typeof currentPoints === "number"
92        ? levels.reduce((matchedIndex, level, index) => {
93            if (currentPoints >= level.points) {
94              return index
95            }
96            return matchedIndex
97          }, -1)
98        : -1
99    const currentLevel =
100      currentLevelIndex >= 0 ? levels[currentLevelIndex] : undefined
101    const nextLevel =
102      currentLevelIndex >= 0 && currentLevelIndex < levels.length - 1
103        ? levels[currentLevelIndex + 1]
104        : undefined
105    const shouldShowProgressBar =
106      showProgressBar &&
107      typeof currentPoints === "number" &&
108      Boolean(currentLevel && nextLevel)
109 
110// … truncated