Progress Card

1"use client";
2 
3import { AlertCircle, Check } from "lucide-react";
4import { Card, CardContent } from "@/registry/brook/ui/card/card";
5import styles from "./progress-card.module.css";
6 
7export type StepStatus = "pending" | "in_progress" | "complete" | "error" | "warning";
8 
9export type Step = {
10  id: string;
11  title: string;
12  description?: string;
13  status: StepStatus;
14};
15 
16type StepIndicatorProps = {
17  status: StepStatus;
18  isFinal?: boolean;
19};
20 
21function AnimatedClock({ className }: { className?: string }) {
22  return (
23    <svg
24      className={className}
25      fill="none"
26      height="12"
27      stroke="currentColor"
28      strokeLinecap="round"
29      strokeLinejoin="round"
30      strokeWidth="2.5"
31      viewBox="0 0 24 24"
32      width="12"
33    >
34      <circle cx="12" cy="12" r="10" />
35      <line x1="12" x2="12" y1="12" y2="7" />
36      <line className={styles.clockHand} x1="12" x2="15" y1="12" y2="13" />
37    </svg>
38  );
39}
40 
41function getIndicatorConfig(status: StepStatus, isFinal: boolean) {
42  switch (status) {
43    case "complete":
44      return {
45        className: `${styles.spinnerToCheck} ${isFinal ? styles.finalCheck : ""}`,
46        icon: "check",
47      } as const;
48    case "in_progress":
49      return { className: styles.spinnerCircle, icon: null } as const;
50    case "error":
51      return { className: styles.errorCircle, icon: "error" } as const;
52    case "warning":
53      return { className: styles.clockCircle, icon: "clock" } as const;
54    default:
55      return { className: styles.pendingCircle, icon: null } as const;
56  }
57}
58 
59function StepIndicator({ status, isFinal = false }: StepIndicatorProps) {
60  const { className, icon } = getIndicatorConfig(status, isFinal);
61  const showSpinner = status === "in_progress" || status === "complete";
62  const isComplete = status === "complete";
63 
64  return (
65    <div className={styles.indicatorWrapper}>
66      {showSpinner && <div className={`${styles.spinnerCircleOverlay} ${isComplete ? styles.spinnerFading : ""}`} />}
67      <div className={className}>
68        {icon === "clock" && <AnimatedClock className={styles.clockIcon} />}
69        {icon === "check" && <Check className={styles.checkIcon} size={14} strokeWidth={3} />}
70        {icon === "error" && <AlertCircle className={styles.errorIcon} size={14} strokeWidth={2.5} />}
71      </div>
72    </div>
73  );
74}
75 
76type ProgressCardProps = {
77  steps: Step[];
78};
79 
80export function ProgressCard({ steps = [] }: ProgressCardProps) {
81// … truncated