Progress Card (Tailwind)

1"use client";
2 
3import { AlertCircle, Check } from "lucide-react";
4import { Card, CardContent } from "@/registry/brook/tailwind/ui/card";
5 
6export type StepStatus = "pending" | "in_progress" | "complete" | "error" | "warning";
7 
8export type Step = {
9  id: string;
10  title: string;
11  description?: string;
12  status: StepStatus;
13};
14 
15type StepIndicatorProps = {
16  status: StepStatus;
17  isFinal?: boolean;
18};
19 
20function AnimatedClock({ className }: { className?: string }) {
21  return (
22    <svg
23      className={className}
24      fill="none"
25      height="12"
26      stroke="currentColor"
27      strokeLinecap="round"
28      strokeLinejoin="round"
29      strokeWidth="2.5"
30      viewBox="0 0 24 24"
31      width="12"
32    >
33      <circle cx="12" cy="12" r="10" />
34      <line x1="12" x2="12" y1="12" y2="7" />
35      <line
36        className="animate-[spin_2s_linear_infinite] motion-reduce:animate-none"
37        style={{ transformOrigin: "12px 12px" }}
38        x1="12"
39        x2="15"
40        y1="12"
41        y2="13"
42      />
43    </svg>
44  );
45}
46 
47const BASE_CLASSES = "relative z-[1] flex h-5 w-5 items-center justify-center rounded-full";
48 
49function getIndicatorConfig(status: StepStatus, isFinal: boolean) {
50  switch (status) {
51    case "complete":
52      return {
53        className: `${BASE_CLASSES} animate-[circle-reveal_0.2s_cubic-bezier(0.165,0.84,0.44,1)_forwards] motion-reduce:animate-none ${
54          isFinal ? "bg-[var(--success)]" : "bg-[var(--foreground)]"
55        }`,
56        icon: "check",
57        iconClassName:
58          "opacity-0 animate-[icon-pop_0.15s_cubic-bezier(0.165,0.84,0.44,1)_0.05s_forwards] motion-reduce:animate-none motion-reduce:opacity-100 text-[var(--background)]",
59      } as const;
60    case "in_progress":
61      return {
62        className: `${BASE_CLASSES} border-2 border-[var(--border)] bg-[var(--card)]`,
63        icon: null,
64        iconClassName: null,
65      } as const;
66    case "error":
67      return {
68        className: `${BASE_CLASSES} bg-[var(--destructive)]`,
69        icon: "error",
70        iconClassName: "text-[var(--destructive-foreground)]",
71      } as const;
72    case "warning":
73      return {
74        className: `${BASE_CLASSES} bg-[var(--warning)]`,
75        icon: "clock",
76        iconClassName: "text-[var(--warning-foreground)]",
77      } as const;
78    default:
79      return {
80        className: `${BASE_CLASSES} border-2 border-[var(--border)] bg-[var(--card)]`,
81        icon: null,
82        iconClassName: null,
83      } as const;
84  }
85}
86 
87// … truncated