Status Tracker

1'use client';
2 
3import { Check } from 'lucide-react';
4import { cn } from '@/lib/utils';
5 
6const KEYFRAMES = `
7@keyframes su-pop { 0% { opacity: 0; transform: scale(0.85) } 100% { opacity: 1; transform: none } }
8`;
9 
10export interface TrackerStage {
11  id: string;
12  label: string;
13}
14 
15export type StatusTrackerVariant = 'Default' | 'Minimal';
16 
17export interface StatusTrackerProps {
18  stages: TrackerStage[];
19  activeIndex: number;
20  progress?: number;
21  detail?: string;
22  variant?: StatusTrackerVariant;
23  className?: string;
24}
25 
26export function StatusTracker({
27  stages,
28  activeIndex,
29  progress = 0,
30  detail,
31  variant = 'Default',
32  className,
33}: StatusTrackerProps) {
34  const done = activeIndex >= stages.length;
35 
36  if (variant === 'Minimal') {
37    const label = done ? 'Complete' : stages[activeIndex]?.label;
38    const overall = done ? 1 : (activeIndex + progress) / stages.length;
39    return (
40      <div className={cn('flex w-full max-w-[360px] items-center gap-2.5', className)}>
41        <span aria-hidden className="h-1 flex-1 overflow-hidden rounded-full bg-black/[0.07] dark:bg-white/[0.09]">
42          <span
43            className="block h-full rounded-full bg-neutral-900 transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-neutral-100"
44            style={{ width: `${overall * 100}%` }}
45          />
46        </span>
47        <span className="shrink-0 text-[12px] text-neutral-500 dark:text-neutral-400">{label}</span>
48        <span className="shrink-0 font-mono text-[10.5px] tabular-nums text-neutral-400 dark:text-neutral-600">
49          {Math.round(overall * 100)}%
50        </span>
51      </div>
52    );
53  }
54 
55  return (
56    <div className={cn('w-full max-w-[440px]', className)}>
57      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
58      <ol className="flex items-center">
59        {stages.map((stage, index) => {
60          const completed = index < activeIndex || done;
61          const active = index === activeIndex && !done;
62          return (
63            <li key={stage.id} className={cn('flex items-center', index > 0 && 'flex-1')}>
64              {index > 0 && (
65                <span aria-hidden className="mx-1.5 h-px flex-1 overflow-hidden bg-black/[0.08] dark:bg-white/[0.1]">
66                  <span
67                    className="block h-full bg-neutral-900 transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-neutral-100"
68                    style={{ width: completed ? '100%' : active ? `${progress * 100}%` : '0%' }}
69// … truncated