Points Badge

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { Sparkle } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9const pointsBadgeVariants = cva(
10  "flex items-center gap-3 rounded-lg transition-colors",
11  {
12    variants: {
13      size: {
14        sm: "text-sm gap-2",
15        default: "",
16        lg: "text-lg gap-4",
17      },
18    },
19    defaultVariants: {
20      size: "default",
21    },
22  }
23)
24 
25interface PointsBadgeProps
26  extends
27    React.HTMLAttributes<HTMLDivElement>,
28    VariantProps<typeof pointsBadgeVariants> {
29  name: string
30  total: number
31  /** When omitted or `null`, the default icon is shown instead of an image. */
32  badgeUrl?: string | null
33  icon?: React.ComponentType<{ className?: string }>
34  formatValue?: (value: number) => string
35}
36 
37const PointsBadge = React.forwardRef<HTMLDivElement, PointsBadgeProps>(
38  (
39    {
40      className,
41      size,
42      name,
43      badgeUrl,
44      total,
45      icon: CustomIcon,
46      formatValue,
47      ...props
48    },
49    ref
50  ) => {
51    const Icon = CustomIcon ?? Sparkle
52    const displayValue = formatValue
53      ? formatValue(total)
54      : total.toLocaleString()
55 
56    const iconSize = {
57      sm: "h-4 w-4",
58      default: "h-5 w-5",
59      lg: "h-6 w-6",
60    }[size ?? "default"]
61 
62    const badgeSize = {
63      sm: "h-6 w-6",
64      default: "h-8 w-8",
65      lg: "h-10 w-10",
66    }[size ?? "default"]
67    const statusLabel = `${displayValue} ${name}`
68 
69    return (
70      <div
71        ref={ref}
72        role="status"
73        aria-label={statusLabel}
74        className={cn(
75          pointsBadgeVariants({ size }),
76          "bg-card border p-4",
77          className
78        )}
79        {...props}
80      >
81        <div className="flex items-center gap-2">
82          {badgeUrl ? (
83            <div>
84              <img
85                src={badgeUrl}
86                alt=""
87                aria-hidden="true"
88                className={cn("shrink-0 rounded object-contain", badgeSize)}
89              />
90            </div>
91          ) : (
92            <div
93              aria-hidden="true"
94              className={cn(
95                "bg-primary/10 flex shrink-0 items-center justify-center rounded-full",
96                badgeSize
97              )}
98            >
99              <Icon className={cn(iconSize, "text-primary")} />
100            </div>
101          )}
102 
103          <div>
104            <span
105              className={cn(
106                "font-bold tabular-nums",
107// … truncated