Boot Sequence

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface BootStep {
7  duration?: number;
8  label: string;
9}
10 
11interface BootSequenceProps extends React.HTMLAttributes<HTMLDivElement> {
12  autoStart?: boolean;
13  onComplete?: () => void;
14  steps: BootStep[];
15  title?: string;
16}
17 
18export function BootSequence({
19  steps,
20  title = "SYSTEM BOOT",
21  onComplete,
22  autoStart = true,
23  className,
24  ...props
25}: BootSequenceProps) {
26  const [_currentStep, setCurrentStep] = React.useState(-1);
27  const [stepStates, setStepStates] = React.useState<
28    ("pending" | "loading" | "done")[]
29  >(steps.map(() => "pending"));
30  const completedRef = React.useRef(false);
31 
32  React.useEffect(() => {
33    if (!autoStart) {
34      return;
35    }
36 
37    let idx = 0;
38    let cancelled = false;
39 
40    function runStep() {
41      if (cancelled || idx >= steps.length) {
42        return;
43      }
44      const step = steps[idx];
45      const i = idx;
46 
47      setCurrentStep(i);
48      setStepStates((prev) => {
49        const next = [...prev];
50        next[i] = "loading";
51        return next;
52      });
53 
54      setTimeout(() => {
55        if (cancelled) {
56          return;
57        }
58        setStepStates((prev) => {
59          const next = [...prev];
60          next[i] = "done";
61          return next;
62        });
63        idx++;
64        if (idx < steps.length) {
65          setTimeout(runStep, 150);
66        } else if (!completedRef.current) {
67          completedRef.current = true;
68          onComplete?.();
69        }
70      }, step.duration ?? 600);
71    }
72 
73    const timer = setTimeout(runStep, 400);
74    return () => {
75      cancelled = true;
76      clearTimeout(timer);
77    };
78  }, [steps, autoStart, onComplete]);
79 
80  const progress = steps.length
81    ? Math.round(
82        (stepStates.filter((s) => s === "done").length / steps.length) * 100
83      )
84    : 0;
85 
86  return (
87    <div
88      data-slot="tron-boot-sequence"
89      className={cn(
90        "relative overflow-hidden rounded border border-primary/30 bg-card/80 backdrop-blur-sm",
91        className
92      )}
93      {...props}
94    >
95      {/* Scanline overlay */}
96      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
97 
98      {/* Header */}
99      <div className="flex items-center gap-2 border-border/50 border-b px-4 py-2">
100        <span className="text-[10px] text-foreground/80 uppercase tracking-widest">
101          {title}
102// … truncated