"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { type StylePreset, getStylePreset } from "@/lib/style-presets";

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

const styleConfigs: Record<
  StylePreset,
  {
    wrapper: string;
    header: string;
    dot: string;
    title: string;
    body: string;
    user: string;
    prompt: string;
    caret: string;
    output: string;
  }
> = {
  modern: {
    wrapper: "rounded-2xl border border-border bg-background text-[var(--style-text-color)] shadow-lg",
    header: "border-b border-[var(--style-border-color)] bg-[var(--style-bg-surface)]/40",
    dot: "border border-border bg-muted",
    title: "text-muted-foreground",
    body: "text-foreground",
    user: "text-primary",
    prompt: "text-muted-foreground",
    caret: "bg-[var(--style-bg-input)]",
    output: "text-muted-foreground",
  },
  glassmorphism: {
    wrapper: "rounded-2xl border border-[var(--style-border-color)]/20 bg-[var(--style-bg-surface)]/10 text-[var(--style-text-color)] shadow-xl backdrop-blur",
    header: "border-b border-[var(--style-border-color)]/20 bg-[var(--style-bg-surface)]/10",
    dot: "border border-[var(--style-border-color)]/30 bg-[var(--style-bg-surface)]/30",
    title: "text-[var(--style-text-color)]/70",
    body: "text-[var(--style-text-color)]",
    user: "text-[var(--style-text-color)]",
    prompt: "text-[var(--style-text-color)]/70",
    caret: "bg-[var(--style-bg-surface)]/70",
    output: "text-[var(--style-text-color)]/70",
  },
  neumorphism: {
    wrapper: "rounded-2xl bg-[var(--style-bg-surface)] text-[var(--style-text-color)] shadow-[8px_8px_16px_#b8b9be,-8px_-8px_16px_#ffffff]",
    header: "border-b border-transparent bg-[var(--style-bg-surface)]",
    dot: "border border-[var(--style-border-color)]/50 bg-[var(--style-bg-surface)]",
    title: "text-muted-foreground",
    body: "text-[var(--style-text-color)]",
    user: "text-[var(--style-text-color)]",
    prompt: "text-muted-foreground",
    caret: "bg-[var(--style-bg-input)]",
    output: "text-muted-foreground",
  },
  brutalist: {
    wrapper: "rounded-none border-2 border-[var(--style-border-color)] bg-[var(--style-bg-surface)] text-[var(--style-text-color)] font-mono uppercase tracking-wide shadow-[6px_6px_0_0_black]",
    header: "border-b-2 border-[var(--style-border-color)] bg-background",
    dot: "border-2 border-[var(--style-border-color)] bg-background",
    title: "text-[var(--style-text-color)]/70",
    body: "text-[var(--style-text-color)]",
    user: "text-[var(--style-text-color)]",
    prompt: "text-[var(--style-text-color)]/70",
    caret: "bg-[var(--style-bg-button)]",
    output: "text-[var(--style-text-color)]/70",
  },
  "retro-mac": {
    wrapper: "rounded-none border border-[var(--style-border-color)] bg-[var(--style-bg-surface)] text-[var(--style-text-color)] font-['Chicago',_'Geneva',_system-ui] shadow-[2px_2px_0_0_black]",
    header: "border-b border-[var(--style-border-color)] bg-[var(--style-bg-surface)]",
    dot: "border border-[var(--style-border-color)] bg-background",
    title: "text-[var(--style-text-color)]/70",
    body: "text-[var(--style-text-color)]",
    user: "text-[var(--style-text-color)]",
    prompt: "text-[var(--style-text-color)]/70",
    caret: "bg-[var(--style-bg-button)]",
    output: "text-[var(--style-text-color)]/70",
  },
  "windows-95": {
    wrapper:
      "rounded-none border-2 border-[var(--style-border-color)] bg-[var(--style-bg-surface)] text-[var(--style-text-color)] font-['MS_Sans_Serif',Tahoma,sans-serif] shadow-[inset_-1px_-1px_0_#0a0a0a,inset_1px_1px_0_#ffffff]",
    header: "border-b-2 border-[var(--style-border-color)] bg-[var(--style-bg-surface)]",
    dot: "border-2 border-[var(--style-border-color)] bg-[var(--style-bg-surface)]",
    title: "text-[var(--style-text-color)]/70",
    body: "text-[var(--style-text-color)]",
    user: "text-[var(--style-text-color)]",
    prompt: "text-[var(--style-text-color)]/70",
    caret: "bg-[var(--style-bg-surface)]",
    output: "text-[var(--style-text-color)]/70",
  },
  flat: {
    wrapper: "rounded-md bg-[var(--style-bg-surface)] text-foreground",
    header: "border-b border-[var(--style-border-color)] bg-background",
    dot: "border border-border bg-muted",
    title: "text-muted-foreground",
    body: "text-foreground",
    user: "text-primary",
    prompt: "text-muted-foreground",
    caret: "bg-[var(--style-bg-input)]",
    output: "text-muted-foreground",
  },
  skeuomorphic: {
    wrapper: "rounded-2xl border border-[var(--style-border-color)] bg-gradient-to-b from-[var(--style-bg-surface)] to-[var(--style-bg-input)] text-[var(--style-text-color)] shadow-lg",
    header: "border-b border-[var(--style-border-color)] bg-gradient-to-b from-[var(--style-bg-surface)] to-[var(--style-bg-input)]",
    dot: "border border-[var(--style-border-color)] bg-background",
    title: "text-[var(--style-text-muted)]",
    body: "text-[var(--style-text-color)]",
    user: "text-primary",
    prompt: "text-[var(--style-text-muted)]",
    caret: "bg-[var(--style-bg-input)]",
    output: "text-[var(--style-text-muted)]",
  },
};

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

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

  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", styles.wrapper, className)}
      style={{ ...(presetVariables as React.CSSProperties), fontFamily: "var(--style-font-family)" }}
      {...props}
    >
      <div className={cn("flex items-center justify-between px-4 py-2", styles.header)}>
        <div className="flex items-center gap-2">
          <span className={cn("h-3 w-3 rounded-full", styles.dot)} />
          <span className={cn("h-3 w-3 rounded-full", styles.dot)} />
          <span className={cn("h-3 w-3 rounded-full", styles.dot)} />
        </div>
        <span className={cn("text-xs font-medium uppercase tracking-[0.2em]", styles.title)}>
          {title}
        </span>
        <span className="w-10" aria-hidden />
      </div>
      <div className={cn("space-y-4 px-6 py-5 font-mono text-sm", styles.body)}>
        <div className="flex items-center gap-3">
          <span className={styles.user}>drnafario</span>
          <span className={styles.prompt}>$</span>
          <span>{typed}</span>
          <span className={cn("h-4 w-2 animate-pulse rounded-sm", styles.caret)} />
        </div>
        <div className={cn("space-y-2", styles.output)}>
          {outputLines.map((line) => (
            <div key={line}>{line}</div>
          ))}
        </div>
      </div>
    </div>
  );
}
Terminal Window

Dependencies

Files

Installation

Related Content Components
