terminal

1"use client"
2 
3import { useEffect, useMemo, useState, type ReactElement } from "react"
4import { TerminalIcon } from "lucide-react"
5import { GoTerminal } from "react-icons/go"
6 
7type TerminalStep = {
8  text: string
9  bold?: boolean
10}
11 
12type TerminalProps = {
13  command: string
14  steps: TerminalStep[]
15  pulseInterval?: number
16  showLocalhost?: boolean
17  hostBarTitle?: string
18  hostMessage?: string
19}
20 
21function MacControls() {
22  return (
23    <>
24      <GoTerminal className="text-muted-foreground mr-1 size-4" />
25      <div className="h-2 w-2 rounded-full bg-red-500" />
26      <div className="h-2 w-2 rounded-full bg-yellow-500" />
27      <div className="h-2 w-2 rounded-full bg-green-500" />
28    </>
29  )
30}
31 
32function LocalHost({ title, message }: { title: string; message: string }) {
33  return (
34    <div className="bg-card animate-in fade-in slide-in-from-top-10 absolute right-4 bottom-5 z-10 overflow-hidden rounded-md border shadow-xl">
35      <div className="bg-muted text-muted-foreground relative flex h-6 flex-row items-center border-b px-4 text-xs">
36        <TerminalIcon className="absolute inset-2 size-3" />
37        <p className="absolute inset-x-0 text-center">{title}</p>
38      </div>
39      <div className="text-card-foreground p-4 text-sm">{message}</div>
40    </div>
41  )
42}
43 
44const Terminal = ({
45  command,
46  steps,
47  pulseInterval = 100,
48  showLocalhost = true,
49  hostBarTitle = "localhost:3000",
50  hostMessage = "New App Created!",
51}: TerminalProps) => {
52  const typingLen = useMemo(() => command.length, [command])
53  const revealLen = useMemo(() => steps.length, [steps])
54  const finalCount = typingLen + revealLen + 1
55 
56  const [counter, setCounter] = useState(finalCount)
57 
58  useEffect(() => {
59    const interval = setInterval(() => {
60      setCounter((prev) => (prev >= finalCount ? prev : prev + 1))
61    }, pulseInterval)
62    return () => clearInterval(interval)
63  }, [pulseInterval, finalCount])
64 
65  const elements: ReactElement[] = []
66 
67  const typedChars = Math.min(counter, typingLen)
68  const isTyping = counter < typingLen
69 
70  elements.push(
71    <span key="command" className="text-foreground">
72      {command.substring(0, typedChars)}
73      {isTyping && (
74        <div className="bg-foreground inline-block h-3 w-1 animate-pulse" />
75      )}
76    </span>
77  )
78 
79  if (!isTyping) {
80    const shownSteps = Math.min(revealLen, counter - typingLen)
81    if (shownSteps > 0) {
82      elements.push(<span key="space"> </span>)
83    }
84    for (let i = 0; i < shownSteps; i++) {
85// … truncated