feat: create quiz

src/App.tsx

@@ -22,6 +22,7 @@ import Quiz from './pages/Quizzes/Quiz'
 import QuizTries from './pages/Quizzes/QuizTries'
 import Waveform from './pages/Quizzes/Waveform'
 import CreateCourse from './pages/Professor/CreateCourse'
+import CreateQuiz from './pages/Professor/CreateQuiz'
 
 export default function App() {
   return (
@@ -47,6 +48,7 @@ export default function App() {
             <Route path="/course/:courseId/quiz/:quizId/waveform" element={<Waveform />} />
             <Route path="/course/:courseId/quiz/:quizId/try/:currentTry" element={<QuizTries />} />
             <Route path="/create/course" element={<CreateCourse />} />
+            <Route path="/create/quiz/:courseId" element={<CreateQuiz />} />
             {/* <Route path="/course/:courseId/practice" element={<Practice />} /> */}
             {/* <Route path="/exercises" element={<Exercises />} /> */}
             {/* <Route path="/exercises/:quizId" element={<Practice />} /> */}

src/components/course/ExercisesGroup.tsx

@@ -100,8 +100,8 @@ export default function ExercisesGroup({itens} : ExercisesGroupProps) {
     // Mostrar loading enquanto não há dados de status
     if (Object.keys(quizStatusMap).length === 0) {
       return (
-        <div className="mt-10 mr-12 p-5 border border-cinza-900 bg-white text-cinza-900">
-          Carregando quizzes...
+        <div className="my-10 p-5 border border-cinza-400 bg-white text-cinza-900">
+          Nenhum quiz encontrado...
         </div>
       )
     }

src/pages/Course/Course.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { fetchAllQuizes, fetchUserQuizProgress } from '@/services/api/quiz';
 import { fetchCourse, exportCourseGrades } from '@/services/api/course';
 import { Quiz } from '@/interfaces/Quiz';
@@ -16,6 +16,8 @@ import ExercisesGroup from '@/components/course/ExercisesGroup';
 import PostThreadCourse from '@/components/course/PostThreadCourse';
 import NewPostForm from '@/components/course/NewPostForm';
 import ReplyForm from '@/components/course/ReplyForm';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencil } from '@fortawesome/free-solid-svg-icons';
 
 export default function Course() {
   const [Quizes, setQuizes] = useState<Quiz[]>([]);
@@ -30,6 +32,8 @@ export default function Course() {
   const { user, isLoading: isAuthLoading } = useAuth();
   const [isExporting, setIsExporting] = useState(false);
 
+  const navigate = useNavigate();
+
   const topLevelPosts = posts.filter(p => p.id_parent === null);
   const replies = posts.filter(p => p.id_parent !== null);
   const getRepliesForPost = (postId: string) => {
@@ -211,43 +215,58 @@ export default function Course() {
           </div>
         )}
 
-        <div className="w-[25%] my-12 flex justify-end">
-          {isUserTheCourseTeacher && (
-            <>
-              <Button
-                upload
-                uploadUrl="/user"
-                fieldName="file"
-                courseId={courseId!}
-                onUploadSuccess={handleImportSuccess}
-                onUploadError={handleImportError}
-                variant='secondary'
-                className="mr-10 bg-white text-xl"
-                text="importar alunos"
-                size="small"
-              ></Button>
-              <Button
-                onClick={handleExportGrades}
-                disabled={isExporting}
-                courseId={courseId!}
-                variant='quaternary'
-                className="mr-[90px] text-cinza-900 bg-white text-xl"
-                text={isExporting ? "Exportando..." : "exportar notas"}
-                size="small"
-              ></Button>
-            </>
-          )}
+        <div className="w-full my-8 flex justify-end px-8 md:px-20">
+
         </div>
       </div>
 
       <div className="flex flex-wrap items-start justify-between gap-12 px-8 md:px-20 mb-20">
         <div className="flex flex-col flex-1 min-w-[60%]">
           {/* Seção de Questionários */}
           <div className="flex flex-col w-full mb-8">
-            <div className="flex w-full sm:w-fit py-4 px-8 items-center justify-center bg-roxo-300 shadow-default-roxo-500 mb-6">
-              <p className="text-lg sm:text-xl font-bold text-[#bab1fc]">
-                Questionários
-              </p>
+            <div className="w-full flex flex-row justify-between mb-8">
+              <div className="flex flex-row flex-wrap gap-5 sm:gap-8">
+                <div className="flex w-full sm:w-fit py-4 px-8 items-center justify-center bg-roxo-300 shadow-default-roxo-500">
+                  <p className="text-lg sm:text-xl font-bold text-[#bab1fc]">
+                    Questionários
+                  </p>
+                </div>
+
+                {user?.role === 2 &&
+                  <button onClick={() => {navigate(`/create/quiz/${courseId}`)}} className="flex w-full sm:w-fit min-w-[200px] py-4 px-6 items-center justify-center bg-verde-300 shadow-default-verde-900 gap-4 transition-all duration-300 hover:scale-[1.03]">
+                    <FontAwesomeIcon icon={faPencil} className="text-[#2f6e4e] text-2xl" />
+                    <h2 className="text-lg sm:text-xl font-bold text-[#2f6e4e]">Novo questionário</h2>
+                  </button>
+                }
+              </div>
+
+              <div className="flex flex-row flex-wrap gap-5 sm:gap-8">
+                {isUserTheCourseTeacher && (
+                  <>
+                    <Button
+                      upload
+                      uploadUrl="/user"
+                      fieldName="file"
+                      courseId={courseId!}
+                      onUploadSuccess={handleImportSuccess}
+                      onUploadError={handleImportError}
+                      variant='default'
+                      className="text-lg"
+                      text="Importar alunos"
+                      size="small"
+                    ></Button>
+                    <Button
+                      onClick={handleExportGrades}
+                      disabled={isExporting}
+                      courseId={courseId!}
+                      variant='default'
+                      className="text-lg"
+                      text={isExporting ? "Exportando..." : "Exportar notas"}
+                      size="small"
+                    ></Button>
+                  </>
+                )}
+              </div>
             </div>
 
             <ExercisesGroup itens={Quizes} />

src/pages/Professor/CreateCourse.tsx

@@ -1,8 +1,7 @@
 import Footer from '@/components/footer/Footer'
 import Header from '@/components/header/Header'
 import { CreateCourseForm } from '@/interfaces/Course'
-import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useState } from 'react'
 
 export default function CreateCourse() {
   const handleDateChange = (field: 'beginDate' | 'endDate') => (e: React.ChangeEvent<HTMLInputElement>) => {

src/pages/Professor/CreateQuiz.tsx

@@ -0,0 +1,78 @@
+import Footer from '@/components/footer/Footer'
+import Header from '@/components/header/Header'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom';
+
+export default function CreateQuiz() {
+  const { courseId } = useParams();
+
+  const [form, setForm] = useState({
+    idCourse: courseId,
+    name: '',
+    description: '',
+    maxAttempts: 1,
+  })
+
+  return (
+    <div className="bg-roxo-900 min-h-screen flex flex-col items-center justify-between overflow-x-hidden">
+      <Header />
+
+      <div className="w-full xl:w-[60%] flex flex-col flex-1 mt-6 mb-12 md:mt-16 md:mb-24 px-8 md:px-20">
+        <h2 className="text-5xl text-[#F8F8F8] font-bold">
+          Criar <span className="text-verde-300">Quiz</span>
+        </h2>
+        <p className="text-lg text-[#F8F8F8] mt-2 leading-[1.8]">
+          Cadastre um novo quiz para este curso. Depois, adicione as perguntas!
+        </p>
+
+        <div className="flex flex-col gap-8 mt-8 p-8 border border-roxo-300 rounded">
+          <div className="flex flex-col gap-2">
+            <p className="text-[#F8F8F8]">Nome do Quiz</p>
+            <input
+              className="p-4 text-[#F8F8F8] border border-roxo-300 bg-[#5A4AC223] rounded focus:outline-none focus:ring-0"
+              type="text"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              placeholder="Quiz 1 - Introdução"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <p className="text-[#F8F8F8]">Descrição</p>
+            <textarea
+              className="p-4 min-h-[100px] text-[#F8F8F8] border border-roxo-300 bg-[#5A4AC223] rounded focus:outline-none focus:ring-0"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              placeholder="Descrição do quiz"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <p className="text-[#F8F8F8]">Máximo de tentativas</p>
+            <input
+              className="p-4 text-[#F8F8F8] border border-roxo-300 bg-[#5A4AC223] rounded focus:outline-none focus:ring-0"
+              type="number"
+              min={1}
+              value={form.maxAttempts}
+              onChange={(e) =>
+                setForm({ ...form, maxAttempts: Number(e.target.value) })
+              }
+              placeholder="1"
+            />
+          </div>
+
+          <button
+            onClick={() => {
+              // enviar os dados
+            }}
+            className="py-4 px-6 rounded text-roxo-900 font-semibold bg-[#8c7aff] hover:scale-[1.01] transition-all duration-300"
+          >
+            Criar Quiz
+          </button>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  )
+}