import React, { useState } from 'react'; function QnA() { const [question, setQuestion] = useState(''); const [answer, setAnswer] = useState(''); const handleQuestionChange = (event) => { setQuestion(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); if (question.toLowerCase() === 'what is this web app?') { setAnswer( <div> <p>Esta aplicação web é um editor de código com destaque de sintaxe, autocompletar e muitos outros recursos!</p> <p>Permite que você escreva, edite e execute código diretamente no navegador, sem precisar instalar nenhum software.</p> <p>O destaque de sintaxe faz seu código parecer bonito, e o recurso de autocompletar ajuda você a escrever código mais rápido e com mais precisão.</p> <p>Além disso, possui muitos outros recursos, como a capacidade de desfazer/refazer, copiar ou exportar código, trabalhar offline, e muito mais!</p> </div> ); } else { setAnswer(<p>Bem, do que você está esperando, comece a editar seu código agora mesmo.</p>); } }; return ( <div> <h1>Bem-vindo ao programa de Perguntas e Respostas (QnA)!</h1> <form onSubmit={handleSubmit}> <label> Faça-me uma pergunta: <input type="text" value={question} onChange={handleQuestionChange} /> </label> <button type="submit">Perguntar</button> </form> <div>{answer}</div> </div> ); } export default QnA;