Countdown

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface CountdownProps extends React.HTMLAttributes<HTMLDivElement> {
7  label: string;
8  value: string;
9  variant?: "default" | "danger" | "warning";
10}
11 
12export function Countdown({
13  value,
14  label,
15  variant = "default",
16  className,
17  ...props
18}: CountdownProps) {
19  const variantStyles = {
20    danger: {
21      bg: "bg-red-500/20",
22      border: "border-red-500/50",
23      text: "text-red-500",
24    },
25    default: {
26      bg: "bg-primary/20",
27      border: "border-primary/50",
28      text: "text-primary",
29    },
30    warning: {
31      bg: "bg-amber-500/20",
32      border: "border-amber-500/50",
33      text: "text-amber-500",
34    },
35  };
36 
37  const styles = variantStyles[variant];
38 
39  return (
40    <div
41      className={cn("flex items-center gap-3 font-mono", className)}
42      {...props}
43    >
44      <span className="text-foreground/80 text-sm uppercase tracking-widest">
45        {label}:
46      </span>
47      <span
48        data-slot="tron-countdown-value"
49        data-variant={variant}
50        className={cn(
51          "rounded border px-3 py-1 font-bold text-lg tracking-wider",
52          styles.bg,
53          styles.text,
54          styles.border
55        )}
56      >
57        {value}
58      </span>
59    </div>
60  );
61}