FIXED:#49 Modifed create quiz ui to enable minutes and seconds input

Changes Made:

- Removed default timer (600 seconds = 10 minutes)
- Added 2 input fields to take seperate minutes and seconds
- Converted them into seconds and set them to customTimer variable

Author: areebahmeddd

app/components/Fileinput.tsx

@@ -35,11 +35,12 @@ function FileInput({ onFileUpload }: FileInputProps) {
     id: uuidv4(),
     isDeleted: false,
     isLocked: false,
-    customTimer: 600, // Default value in seconds
+    customTimer: 0, // Default value in seconds
   } as QuizInfo);
   const [quizGenerated, setQuizGenerated] = useState(false);
   const [viewQuizData, setViewQuizData] = useState(false);
   const [fileName, setFileName] = useState("");
+  const [timerInput, setTimerInput] = useState({ minutes: "", seconds: "" });
 
   const onDrop = (acceptedFiles: any) => {
     const file = acceptedFiles[0];
@@ -82,15 +83,24 @@ function FileInput({ onFileUpload }: FileInputProps) {
     const { name, value } = e.target;
     setQuizInfo({
       ...quizInfo,
-      [name]: name === "customTimer" ? parseInt(value, 10) : value, // Ensure customTimer is an integer
+      [name]: value,
+    });
+  };
+
+  const handleTimerInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setTimerInput({
+      ...timerInput,
+      [name]: value,
     });
   };
 
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   const generateQuiz = () => {
     if (quizInfo.quizName && quizInfo.course && quizInfo.courseCode && excelData) {
-      onFileUpload({ ...quizInfo, quizData: excelData, fileName });
+      const totalSeconds = (parseInt(timerInput.minutes) * 60) + parseInt(timerInput.seconds);
+      onFileUpload({ ...quizInfo, customTimer: totalSeconds, quizData: excelData, fileName });
       setQuizGenerated(true);
       router.push("/");
     } else {
@@ -135,10 +145,18 @@ function FileInput({ onFileUpload }: FileInputProps) {
         />
         <input
           type="number"
-          name="customTimer"
-          value={quizInfo.customTimer}
-          placeholder="Custom Timer (seconds)"
-          onChange={handleInputChange}
+          name="minutes"
+          value={timerInput.minutes}
+          placeholder="Minutes"
+          onChange={handleTimerInputChange}
+          className="text-black bg-slate-500 w-full m-2 p-2 rounded"
+        />
+        <input
+          type="number"
+          name="seconds"
+          value={timerInput.seconds}
+          placeholder="Seconds"
+          onChange={handleTimerInputChange}
           className="text-black bg-slate-500 w-full m-2 p-2 rounded"
         />
       </div>