"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface TerminalWindowProps
  extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  command?: string;
  outputLines?: string[];
  typingSpeedMs?: number;
}

const defaultOutput = [
  "Installing dependencies...",
  "Compiled successfully.",
  "Ready at http://localhost:3000",
];

export function TerminalWindow({
  title = "Terminal",
  command = "npm run build",
  outputLines = defaultOutput,
  typingSpeedMs = 70,
  className,
  ...props
}: TerminalWindowProps) {
  const [typed, setTyped] = React.useState("");

  React.useEffect(() => {
    setTyped("");
    let index = 0;
    const interval = window.setInterval(() => {
      index += 1;
      setTyped(command.slice(0, index));
      if (index >= command.length) {
        window.clearInterval(interval);
      }
    }, typingSpeedMs);

    return () => window.clearInterval(interval);
  }, [command, typingSpeedMs]);

  return (
    <div
      className={cn("overflow-hidden rounded-2xl border border-border bg-card", className)}
      {...props}
    >
      <div className="flex items-center justify-between border-b border-border bg-muted/40 px-4 py-2">
        <div className="flex items-center gap-2">
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
        </div>
        <span className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
          {title}
        </span>
        <span className="w-10" aria-hidden />
      </div>
      <div className="space-y-4 px-6 py-5 font-mono text-sm text-foreground">
        <div className="flex items-center gap-3">
          <span className="text-primary">drnafario</span>
          <span className="text-muted-foreground">$</span>
          <span>{typed}</span>
          <span className="h-4 w-2 animate-pulse rounded-sm bg-muted-foreground" />
        </div>
        <div className="space-y-2 text-muted-foreground">
          {outputLines.map((line) => (
            <div key={line}>{line}</div>
          ))}
        </div>
      </div>
    </div>
  );
}
Terminal Window

Dependencies

Files

Installation
