web/src/App.jsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ChevronLeft, Menu } from "lucide-react"
import { useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify"
import 'react-toastify/dist/ReactToastify.css';

function App() {

  const [subject, setSubject] = useState("");

  const [menuState, setMenuState] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [questions, setQuestions] = useState([
    {
      question: "Qual a cor do céu?",
      options: ["Azul", "Verde", "Amarelo", "Vermelho"],
      answer: "Azul"
    },
    {
      question: "Qual a cor da grama?",
      options: ["Azul", "Verde", "Amarelo", "Vermelho"],
      answer: "Verde"
    },
    {
      question: "Qual a cor do sol?",
      options: ["Azul", "Verde", "Amarelo", "Vermelho"],
      answer: "Amarelo"
    },
    {
      question: "Qual a cor do sangue?",
      options: ["Azul", "Verde", "Amarelo", "Vermelho"],
      answer: "Vermelho"
    }
  
  ]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const res = await fetch("/generate_questions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          subject
        })
      });
      console.log(res)
      if (res.ok) {
        const data = await res.json();
        console.log(data)
        setQuestions(data.questions);
      } else {
        toast.error("Erro ao gerar questões", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          className: "bg-slate-900 text-white font-semibold",
        });
      }
    } catch (err) {
      console.error(err);
      toast.error("Erro ao gerar questões", {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        className: "bg-slate-900 text-white font-semibold",
      });
    }
    setIsLoading(false);
  }


  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > 768) {
        setMenuState(true);
      } else {
        setMenuState(false);
      }
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }
    , []);

  return (
    <div className="font-sans h-screen text-white min-h-screen bg-slate-900 flex flex-col relative overflow-hidden">
      <header className="p-10 flex items-center gap-2.5">
        <Menu className="md:hidden" onClick={() => setMenuState(prev => !prev)} />
        <h1 className="text-3xl font-bold">
          Pergunt.<span className="text-transparent bg-clip-text bg-gradient-to-r from-green-300 to bg-blue-500">AÍ</span>
        </h1>
      </header>
      <main className="flex-1 flex overflow-hidden">
        {
          menuState &&
          <form
            onSubmit={handleSubmit}
            className="p-10 flex flex-col gap-2.5  absolute top-0 bg-black/95 h-full z-10 md:static md:h-full md:bg-transparent">
            <div className="md:sr-only">
              <ChevronLeft className="w-10 h-10" onClick={e => setMenuState(prev => !prev)} />
            </div>
            <h2>Selecione uma matéria:</h2>
            <Select defaultValue="biologia" >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Matéria" />
              </SelectTrigger>
              <SelectContent >
                <SelectItem value="biologia">Biologia</SelectItem>
              </SelectContent>
            </Select>
            <h2>Selecione um conteúdo:</h2>
            <Select onValueChange={value => setSubject(value)}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Conteúdo" />
              </SelectTrigger>
              <SelectContent onChange={e => console.log(e)}>
                <SelectItem value="fisiologia">Fisiologia</SelectItem>
                <SelectItem value="embriologia">Embriologia</SelectItem>
                <SelectItem value="citologia">Citologia</SelectItem>
              </SelectContent>
            </Select>
            <button className="h-10 bg-purple-500 rounded px-2.5 py-1 mt-5 hover:brightness-110 transition-all flex items-center justify-center disabled:hover:brightness-75 disabled:brightness-75"
              disabled={isLoading || !subject}>
              {
                isLoading ?
                  <div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full"></div>
                  :
                  "Enviar"
              }
            </button>
          </form>
        }
        <section className="p-10 flex-1 md:border-l-2 md:border-l-white flex flex-col gap-2.5 ">
          <h2 className="text-2xl font-bold">Questões</h2>
          <div className="w-full h-full flex flex-col gap-5 rounded p-2.5 overflow-y-scroll">
            {questions ?
              questions.map(({ question, options, answer }, index) => (
                <div key={index} className="bg-slate-950 ring-2 ring-white p-2.5 rounded">
                  {question}<br /><br />
                  {options.map((option, i) => (
                    <div key={i}>
                      {option}
                    </div>
                  ))}<br />
                  Resposta correta: {answer}
                </div>
              ))
              : <div className="p-2.5 bg-slate-950 ring-2 ring-white rounded">{"Ainda sem questões"}</div>}
          </div>
        </section>
        <ToastContainer />
      </main>
    </div>
  )
}

export default App