number-badge

1"use client"
2 
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { Badge } from "@/components/ui/badge"
6import { NumberCount } from "@/components/ui/number-count"
7import { cn } from "@/lib/utils"
8 
9const numberBadgeVariants = cva(
10  "absolute z-10 min-w-5 justify-center rounded-full px-1 tabular-nums ring-1 ring-background backdrop-blur-sm transition-all duration-200 ease-out select-none",
11  {
12    variants: {
13      placement: {
14        "top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2",
15        "top-left": "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
16        "bottom-right": "bottom-0 right-0 translate-x-1/2 translate-y-1/2",
17        "bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2",
18      },
19      hidden: {
20        true: "scale-0 opacity-0 pointer-events-none",
21        false: "",
22      },
23    },
24    defaultVariants: {
25      placement: "top-right",
26      hidden: false,
27    },
28  }
29)
30 
31interface NumberBadgeProps
32  extends Omit<React.ComponentProps<typeof Badge>, "children"> {
33  value: number
34  max?: number
35  showZero?: boolean
36  placement?: NonNullable<VariantProps<typeof numberBadgeVariants>["placement"]>
37  children?: React.ReactNode
38}
39 
40function NumberBadge({
41  value,
42  max = 99,
43  showZero = false,
44  placement = "top-right",
45  variant,
46  className,
47  children,
48  ...props
49}: NumberBadgeProps) {
50  const capped = value > max
51  const hidden = value <= 0 && !showZero
52 
53  return (
54    <span className="relative inline-flex w-fit shrink-0">
55      {children}
56      <Badge
57        variant={variant}
58        aria-hidden={hidden || undefined}
59        className={cn(numberBadgeVariants({ placement, hidden }), className)}
60        {...props}
61      >
62        <NumberCount
63          value={capped ? max : value}
64          suffix={capped ? "+" : undefined}
65        />
66      </Badge>
67    </span>
68  )
69}
70 
71export { NumberBadge, numberBadgeVariants, type NumberBadgeProps }