Terminal

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface LineState {
8  /** This line is the one currently running. */
9  active: boolean
10  /** Milliseconds per character, inherited from the terminal. */
11  speed: number
12  /** Play everything at once with no typing. */
13  instant: boolean
14  /** Hand the session on to the next line. */
15  done: () => void
16}
17 
18const LineContext = React.createContext<LineState>({
19  active: false,
20  speed: 34,
21  instant: true,
22  done: () => {},
23})
24 
25export interface TerminalProps extends React.ComponentProps<"div"> {
26  /** Text in the window bar. A path or a shell name, usually. */
27  title?: string
28  /** Milliseconds a single character takes to be typed. */
29  speed?: number
30  /** Hold the session until the window scrolls into view. */
31  startOnView?: boolean
32  /** Print the whole session at once with no typing. */
33  instant?: boolean
34}
35 
36/**
37 * Lines are rendered as the session reaches them rather than hidden and
38 * revealed, so a line that has not run yet is not in the document at all and
39 * cannot be read out ahead of itself.
40 */
41export function Terminal({
42  children,
43  className,
44  title = "bash",
45  speed = 34,
46  startOnView = true,
47  instant = false,
48  ...props
49}: TerminalProps) {
50  const ref = React.useRef<HTMLDivElement>(null)
51  const lines = React.Children.toArray(children)
52  const [started, setStarted] = React.useState(!startOnView)
53  const [step, setStep] = React.useState(0)
54  const [reduced, setReduced] = React.useState(false)
55 
56  React.useEffect(() => {
57    setReduced(window.matchMedia("(prefers-reduced-motion: reduce)").matches)
58  }, [])
59 
60  React.useEffect(() => {
61    if (!startOnView) {
62      return
63    }
64 
65    const node = ref.current
66    if (!node || typeof IntersectionObserver === "undefined") {
67      setStarted(true)
68      return
69    }
70 
71    const observer = new IntersectionObserver(
72      ([entry]) => {
73        if (entry.isIntersecting) {
74          setStarted(true)
75          observer.disconnect()
76        }
77      },
78      { threshold: 0.3 }
79    )
80 
81    observer.observe(node)
82    return () => observer.disconnect()
83  }, [startOnView])
84 
85  const atOnce = instant || reduced
86  const reached = atOnce ? lines.length - 1 : step
87 
88  return (
89    <div
90      ref={ref}
91      data-slot="terminal"
92      className={cn(
93        "border-border bg-card w-full overflow-hidden rounded-xl border font-mono text-sm",
94        className
95      )}
96      {...props}
97    >
98// … truncated