# All files / src/components/features/python-runner TerminalInput.tsx

0% Statements 0/52
0% Branches 0/1
0% Functions 0/1
0% Lines 0/52

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

     import { useEffect, useRef } from 'react'
    import { motion } from 'framer-motion'
    import { Input } from '@/components/ui/input'

    interface TerminalInputProps {
      waitingForInput: boolean
      inputValue: string
      onInputChange: (value: string) => void
      onSubmit: (e: React.FormEvent) => void
    }

    export function TerminalInput({
      waitingForInput,
      inputValue,
      onInputChange,
      onSubmit
    }: TerminalInputProps) {
      const inputRef = useRef<HTMLInputElement>(null)

      useEffect(() => {
        if (waitingForInput && inputRef.current) {
          inputRef.current.focus()
        }
      }, [waitingForInput])

      if (!waitingForInput) {
        return null
      }

      return (
        <motion.form
          onSubmit={onSubmit}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex items-center gap-2 mt-2"
          data-testid="terminal-input-form"
        >
          <span className="text-primary font-bold" aria-hidden="true">{'>'}</span>
          <Input
            ref={inputRef}
            type="text"
            value={inputValue}
            onChange={(e) => onInputChange(e.target.value)}
            className="flex-1 font-mono bg-background border-accent/50 focus:border-accent"
            placeholder="Enter input..."
            disabled={!waitingForInput}
            data-testid="terminal-input"
            aria-label="Terminal input"
          />
        </motion.form>
      )
    }