alteracoes promptMode

web/package-lock.json

@@ -8,8 +8,10 @@
       "name": "question-generator",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-switch": "^1.0.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.377.0",
@@ -1230,6 +1232,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -1392,6 +1417,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",

web/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-switch": "^1.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.377.0",

web/src/App.jsx

@@ -9,6 +9,10 @@ import { ChevronLeft, Menu } from "lucide-react"
 import { useEffect, useState } from "react";
 import { ToastContainer, toast } from "react-toastify"
 import 'react-toastify/dist/ReactToastify.css';
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
 
 function App() {
 
@@ -18,6 +22,7 @@ function App() {
   const [menuState, setMenuState] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [questions, setQuestions] = useState(null);
+  const [promptMode, setPromptMode] = useState(false);
 
   const subjects = [
     { label: "Fisiologia", value: "fisiologia" },
@@ -105,76 +110,99 @@ function App() {
         </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)} />
+        {menuState &&
+          <>
+            <div className="p-10 flex flex-col gap-5">
+              <div className="flex items-center space-x-2 w-56">
+                <Switch id="prompt-mode" checked={promptMode} onCheckedChange={setPromptMode} />
+                <Label htmlFor="prompt-mode">Prompt Mode</Label>
+              </div>
+              {!promptMode && (
+                <form
+                  onSubmit={handleSubmit}
+                  className="flex flex-col gap-2.5 absolute top-0 bg-black/95 h-full md:h-fit z-10 md:static md:bg-transparent">
+                  <div className="md:sr-only">
+                    <ChevronLeft className="w-10 h-10" onClick={e => setMenuState(prev => !prev)} />
+                  </div>
+                  <fieldset>
+                    <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)}>
+                        {subjects && subjects.map(({ label, value }) => (
+                          <SelectItem key={value} value={value}>{label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <h2>Selecione uma dificuldade:</h2>
+                    <Select onValueChange={value => setDifficultie(value)}>
+                      <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Dificuldade" />
+                      </SelectTrigger>
+                      <SelectContent onChange={e => console.log(e)}>
+                        {difficulties && difficulties.map(({ label, value }) => (
+                          <SelectItem key={value} value={value}>{label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </fieldset>
+                  <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 || !difficultie}>
+                    {isLoading ?
+                      <div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full"></div>
+                      :
+                      "Enviar"
+                    }
+                  </button>
+                </form>
+              )}
+
+
             </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)}>
-                {subjects && subjects.map(({ label, value }) => (
-                  <SelectItem key={value} value={value}>{label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <h2>Selecione uma dificuldade:</h2>
-            <Select onValueChange={value => setDifficultie(value)}>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Dificuldade" />
-              </SelectTrigger>
-              <SelectContent onChange={e => console.log(e)}>
-                {difficulties && difficulties.map(({ label, value }) => (
-                  <SelectItem key={value} value={value}>{label}</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 || !difficultie}>
-              {
-                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 ">
+              {promptMode ? (
+                <>
+                  <h2 className="text-2xl font-bold mb-5">Digite seu prompt para gerarmos as questões!</h2>
+                  <Input placeholder="Digite seu prompt:" />
+                </>
+              ) : (
+                <>
+                  <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">Escolha os filtros para criar as questões</div>
+                    }
+                  </div>
+                </>
+              )}
+            </section>
+          </>
         }
-        <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>
   )
 }

web/src/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }

web/src/components/ui/label.jsx

@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

web/src/components/ui/switch.jsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )} />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }