Points Boost

1"use client"
2 
3import * as React from "react"
4import { ChevronRight } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8 
9export type PointsBoostStatus = "active" | "scheduled" | "finished"
10 
11interface PointsBoostCta {
12  link: string
13  text: string
14}
15 
16interface PointsBoostData {
17  name: string
18  status: PointsBoostStatus
19  /** Optional subtitle below the title row. */
20  description?: string
21  multiplier: number
22  endDate?: string | Date
23}
24 
25interface PointsBoostProps extends React.HTMLAttributes<HTMLDivElement> {
26  boost: PointsBoostData
27  cta: PointsBoostCta
28}
29 
30function formatCountdown(ms: number) {
31  const totalSeconds = Math.max(0, Math.floor(ms / 1000))
32  const hours = Math.floor(totalSeconds / 3600)
33  const minutes = Math.floor((totalSeconds % 3600) / 60)
34  const seconds = totalSeconds % 60
35  return `Ends in ${hours}h ${minutes}m ${seconds}s`
36}
37 
38const PointsBoost = React.forwardRef<HTMLDivElement, PointsBoostProps>(
39  ({ className, boost, cta, ...props }, ref) => {
40    const endTimestamp = React.useMemo(() => {
41      if (!boost.endDate) return null
42      const date =
43        boost.endDate instanceof Date ? boost.endDate : new Date(boost.endDate)
44      const timestamp = date.getTime()
45      return Number.isNaN(timestamp) ? null : timestamp
46    }, [boost.endDate])
47 
48    const [now, setNow] = React.useState(Date.now())
49 
50    React.useEffect(() => {
51      if (!endTimestamp) return
52      const timer = window.setInterval(() => setNow(Date.now()), 1000)
53      return () => window.clearInterval(timer)
54    }, [endTimestamp])
55 
56    const countdownLabel = React.useMemo(() => {
57      if (!endTimestamp) return null
58      const remaining = endTimestamp - now
59      if (remaining <= 0) return "Ended"
60      return formatCountdown(remaining)
61    }, [endTimestamp, now])
62 
63    return (
64      <div
65        ref={ref}
66        className={cn(
67          "bg-card text-foreground flex flex-col items-start justify-between gap-4 rounded-xl border px-4 py-3 lg:flex-row lg:items-center",
68          className
69        )}
70        {...props}
71      >
72        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
73          <p className="flex flex-wrap items-center gap-2 font-semibold">
74            <span className="min-w-0 truncate">{boost.name}</span>
75            <span className="bg-muted-foreground/10 text-primary shrink-0 rounded-full px-2 py-0.5">
76              x{boost.multiplier}
77            </span>
78          </p>
79// … truncated