Streak Badge

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { Flame } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9// Types (inlined - only fields used by this component)
10interface StreakResponse {
11  length: number
12  frequency: "daily" | "weekly" | "monthly"
13}
14 
15// Variants
16const streakBadgeVariants = cva(
17  "inline-flex flex-col items-center justify-center rounded-3xl border border-border/60 bg-card text-center text-card-foreground transition-colors",
18  {
19    variants: {
20      size: {
21        sm: "w-28 gap-1.5 p-3",
22        default: "w-40 gap-2.5 p-5",
23        lg: "w-52 gap-3 p-6",
24      },
25    },
26    defaultVariants: {
27      size: "default",
28    },
29  }
30)
31 
32// Props
33interface StreakBadgeProps
34  extends
35    React.HTMLAttributes<HTMLDivElement>,
36    VariantProps<typeof streakBadgeVariants> {
37  /** Streak length value */
38  length?: number
39  /** Streak frequency used for label rendering */
40  frequency?: StreakResponse["frequency"]
41  /** Optional subtitle shown below streak length */
42  subtitle?: string
43  /** Custom icon to replace flame */
44  icon?: React.ReactNode
45}
46 
47const StreakBadge = React.forwardRef<HTMLDivElement, StreakBadgeProps>(
48  (
49    { className, size, length, frequency = "daily", subtitle, icon, ...props },
50    ref
51  ) => {
52    const streakLength = length ?? 0
53 
54    const frequencyLabel = {
55      daily: "day",
56      weekly: "week",
57      monthly: "month",
58    }[frequency]
59 
60    const pluralLabel =
61      streakLength === 1 ? frequencyLabel : `${frequencyLabel}s`
62 
63    const iconSize = {
64      sm: "h-10 w-10",
65      default: "h-16 w-16",
66      lg: "h-20 w-20",
67    }[size ?? "default"]
68 
69    const valueSize = {
70      sm: "text-2xl",
71      default: "text-5xl",
72      lg: "text-6xl",
73    }[size ?? "default"]
74 
75    const subtitleSize = {
76      sm: "text-xs",
77      default: "text-sm",
78      lg: "text-base",
79    }[size ?? "default"]
80 
81    const subtitleText = subtitle ?? "streak"
82    const valueUnit = pluralLabel
83 
84    // Build accessible label
85    const ariaLabel = `${streakLength} ${pluralLabel} streak`
86 
87    return (
88      <div
89        ref={ref}
90        role="status"
91        aria-label={ariaLabel}
92        className={cn(streakBadgeVariants({ size }), className)}
93        {...props}
94      >
95        {icon ?? (
96          <Flame
97            className={cn(iconSize, "text-primary shrink-0")}
98            aria-hidden="true"
99          />
100        )}
101        <span
102// … truncated