web/src/App.jsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ChevronLeft, Menu } from "lucide-react"
import { useEffect, useRef, useState } from "react";

function App() {

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

  const [menuState, setMenuState] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [questions, setQuestions] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const res = await fetch("https://abac-35-243-250-231.ngrok-free.app/question" + "/" + subject, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        // body: JSON.stringify({
        //   assunto: subject
        // })
      });
      console.log(res)
      if (res.ok) {
        const data = await res.json();
        console.log(data)
        setQuestions(data.question.split("###"));
      }
    } catch (err) {
      console.error(err);
    }
    setIsLoading(false);
  }


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

  return (
    <div className="font-sans text-white min-h-screen bg-slate-900 flex flex-col relative">
      <header className="p-10 flex items-center gap-2.5">
        <Menu className="md:hidden" onClick={e => setMenuState(prev => !prev)} />
        <h1 className="text-3xl font-bold">
          PerguntAI
        </h1>
      </header>
      <main className="flex-1 flex">
        {
          menuState &&
          <form
            onSubmit={handleSubmit}
            className="p-10 flex flex-col gap-2.5  absolute top-0 bg-black/70 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}>
              {
                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 ring-2 ring-white rounded bg-slate-950 p-2.5">
            {questions ?
              questions.map((question, index) => <p className="" key={index}>{question}</p>)
              : "Ainda sem questões"}
          </div>
        </section>
      </main>
    </div>
  )
}

export default App