Terminal

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6export type TerminalLineType = 'input' | 'output' | 'warn' | 'error' | 'system'
7 
8export interface TerminalLine {
9  type?:      TerminalLineType
10  text:       string
11  timestamp?: string
12}
13 
14export interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
15  lines?:       TerminalLine[]
16  prompt?:      string
17  title?:       string
18  height?:      string | number
19  blinkCursor?: boolean
20}
21 
22function lineColor(type: TerminalLineType = 'output'): string {
23  switch (type) {
24    case 'input':  return 'var(--color-green)'
25    case 'output': return 'var(--text-secondary)'
26    case 'warn':   return 'var(--color-amber)'
27    case 'error':  return 'var(--color-red)'
28    case 'system': return 'var(--text-muted)'
29  }
30}
31 
32function linePrefix(type: TerminalLineType = 'output'): string {
33  switch (type) {
34    case 'input':  return '>'
35    case 'output': return ' '
36    case 'warn':   return '⚠'
37    case 'error':  return '✕'
38    case 'system': return '#'
39  }
40}
41 
42const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
43  (
44    {
45      className,
46      lines = [],
47      prompt = '>',
48      title = 'TERMINAL',
49      height = '16rem',
50      blinkCursor = true,
51      style,
52      ...props
53    },
54    ref
55  ) => {
56    const bodyRef = React.useRef<HTMLDivElement>(null)
57 
58    React.useEffect(() => {
59      if (bodyRef.current) {
60        bodyRef.current.scrollTop = bodyRef.current.scrollHeight
61      }
62    }, [lines])
63 
64    return (
65      <div
66        ref={ref}
67        className={cn(className)}
68        style={{
69          border:      '1px solid var(--border)',
70          background:  'var(--surface)',
71          fontFamily:  'var(--font-mono)',
72          overflow:    'hidden',
73          display:     'flex',
74          flexDirection: 'column',
75          ...style,
76        }}
77        {...props}
78      >
79        {/* Title bar */}
80        <div
81          style={{
82            display:      'flex',
83            alignItems:   'center',
84            gap:          '0.5rem',
85            padding:      '0.4rem 0.75rem',
86            borderBottom: '1px solid var(--border)',
87            background:   'var(--surface-raised)',
88          }}
89        >
90          <span
91            style={{
92              fontSize:      '0.6rem',
93              color:         'var(--text-muted)',
94              letterSpacing: '0.12em',
95              textTransform: 'uppercase',
96            }}
97          >
98            {title}
99// … truncated