Streak Card

1"use client"
2 
3import * as React from "react"
4import {
5  CheckCircle2,
6  ChevronDown,
7  ChevronRight,
8  Flame,
9  RefreshCcw,
10} from "lucide-react"
11 
12import { cn } from "@/lib/utils"
13import { Button } from "@/components/ui/button"
14import {
15  StreakCalendar,
16  type StreakPeriod,
17} from "@/components/ui/streak-calendar"
18 
19interface StreakCardProps extends React.HTMLAttributes<HTMLDivElement> {
20  /** Streak periods passed through to StreakCalendar */
21  streak: StreakPeriod[]
22  /** Current streak value in days */
23  currentStreak: number
24  /** Longest streak value in days */
25  longestStreak: number
26  /** Secondary total metric value */
27  total: number
28  /** Optional heading text */
29  title?: string
30  /** Label for the action button */
31  actionLabel?: string
32  /** Callback for action click */
33  onActionClick?: () => void
34  /** Show "How streaks work" dropdown section */
35  showHowItWorks?: boolean
36  /** Title for the dropdown trigger */
37  howItWorksTitle?: string
38  /** Content rows shown when the dropdown is expanded */
39  howItWorksItems?: string[]
40  /** Initial expanded state for dropdown */
41  defaultHowItWorksOpen?: boolean
42}
43 
44const StreakCard = React.forwardRef<HTMLDivElement, StreakCardProps>(
45  (
46    {
47      className,
48      streak,
49      currentStreak,
50      longestStreak,
51      total,
52      title = "Streak",
53      actionLabel = "View Details",
54      onActionClick,
55      showHowItWorks = true,
56      howItWorksTitle = "How do streaks work?",
57      howItWorksItems = [
58        "Complete at least one activity each day to build your streak.",
59        "Each day you do an activity, your streak increases.",
60        "Missing a day will reset your streak to 0.",
61      ],
62      defaultHowItWorksOpen = false,
63      ...props
64    },
65    ref
66  ) => {
67    const [isHowItWorksOpen, setIsHowItWorksOpen] = React.useState(
68      defaultHowItWorksOpen
69    )
70    const howItWorksContentId = React.useId()
71 
72    return (
73      <section
74        ref={ref}
75        aria-label="Streak summary card"
76        className={cn("bg-card rounded-2xl border p-6 shadow-sm", className)}
77        {...props}
78      >
79        <header className="mb-3 flex items-center justify-between gap-3">
80          <div className="flex items-center gap-2">
81            <Flame className="text-primary h-6 w-6" aria-hidden="true" />
82            <h3 className="text-2xl leading-none font-semibold">{title}</h3>
83          </div>
84          <Button
85            variant="link"
86            size="sm"
87            onClick={onActionClick}
88// … truncated