Создание хакерского приложения

import React, { useEffect, useState } from 'react';
import './App.css';

const App = () => {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState([]);
  const [isListening, setIsListening] = useState(false);
  const [page, setPage] = useState('main');

  const handleCommand = (command) => {
    // Handle command logic here
    setOutput([...output, `$ ${command}`]);
  };

  const handleVoiceInput = () => {
    const recognition = new window.webkitSpeechRecognition();
    recognition.lang = 'en-US';
    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      setInput(transcript);
      handleCommand(transcript);
    };
    recognition.start();
    setIsListening(true);
  };

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'F' && event.shiftKey && event.metaKey) {
        setPage('main');
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    <div className='App'>
      <div className='terminal'>
        {output.map((line, index) => (
          <div key={index}>{line}</div>
        ))}
        <div>
          <span>$</span>
          <input
            type='text'
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={(e) => {
              if (e.key === 'Enter') {
                handleCommand(input);
                setInput('');
              }
            }}
          />
          <button onClick={handleVoiceInput}>
            {isListening ? 'Listening...' : 'Voice Input'}
          </button>
        </div>
      </div>
      <div className='laptop-animation'>
        <img src='https://placehold.co/300x300' alt='hacking animation' />
      </div>
    </div>
  );
};

export default App;