Terminal

1"use client";
2import type React from "react";
3import { useState, useEffect, useRef, useCallback } from "react";
4import { Send, Copy, RotateCcw, TerminalIcon } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7export type TerminalProps = {
8  command?: string;
9  steps?: string[];
10  finalMessage?: string;
11  stepDelay?: number;
12  typingDelay?: number;
13  icon?: React.ReactNode;
14  promptSymbol?: string;
15  inputPlaceholder?: string;
16  autoExecute?: boolean;
17  repeat?: boolean;
18  repeatDelay?: number;
19  className?: string;
20  variant?: "default" | "dark" | "matrix" | "retro" | "custom";
21  customTheme?: {
22    container?: string;
23    header?: string;
24    output?: string;
25    button?: string;
26  };
27};
28 
29const InteractiveTerminal: React.FC<TerminalProps> = ({
30  command = "help",
31  steps = ["Processing command..."],
32  finalMessage = "Command executed successfully!",
33  stepDelay = 1000,
34  typingDelay = 100,
35  icon = <TerminalIcon className="h-4 w-4 mr-2" />,
36  promptSymbol = "$",
37  inputPlaceholder = "Type your command here...",
38  autoExecute = false,
39  repeat = false,
40  repeatDelay = 3000,
41  className,
42  variant = "default",
43  customTheme,
44}) => {
45  const [input, setInput] = useState("");
46  const [output, setOutput] = useState<string[]>([]);
47  const [step, setStep] = useState(0);
48  const [copied, setCopied] = useState(false);
49  const [typing, setTyping] = useState(false);
50  const [charIndex, setCharIndex] = useState(0);
51  const [commandExecuted, setCommandExecuted] = useState(false);
52  const [completed, setCompleted] = useState(false);
53  const outputRef = useRef<HTMLDivElement>(null);
54 
55  const themes = {
56    default: {
57      container: "bg-gray-900 text-green-400",
58      header: "bg-gray-950 border-green-400/20",
59      output: "bg-black",
60      button: "hover:bg-gray-800",
61    },
62    dark: {
63      container: "bg-black text-blue-400",
64      header: "bg-gray-950 border-blue-400/20",
65      output: "bg-gray-950",
66      button: "hover:bg-gray-800",
67    },
68    matrix: {
69      container: "bg-black text-green-500",
70      header: "bg-green-950/30 border-green-500/30",
71      output: "bg-black",
72      button: "hover:bg-green-900/30",
73    },
74    retro: {
75      container: "bg-amber-950 text-amber-400",
76      header: "bg-amber-900/50 border-amber-400/20",
77      output: "bg-black",
78      button: "hover:bg-amber-800/30",
79    },
80  };
81 
82  const theme =
83    variant === "custom" && customTheme
84      ? customTheme
85      : themes[variant as keyof typeof themes] || themes.default;
86 
87// … truncated