Add custom questions + change theme + remove webcam from photo question

components/editCustomQuestions.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { IconSquareX } from '@tabler/icons-react'
+
+export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}){
+  let questionTemp = questionList
+  console.log(questionTemp)
+  const [forceUpdate, setForceUpdate] = useState(0)
+
+  function addQuestion(){
+    questionTemp.push({text: "", type:"text"})
+    setForceUpdate(oldFu => oldFu + 1)
+  }
+
+  function removeQuestion(index){
+    questionTemp.splice(index, 1)
+    setForceUpdate(oldFu => oldFu + 1)
+  }
+
+  return <>
+  <dialog ref={dataRef} className="modal">
+    <div className="modal-box flex flex-col space-y-8">
+      <h3 className="font-bold text-lg">Edit custom questions!</h3>
+      <div className="flex flex-col space-y-4">
+      { questionTemp.map((question, index) => {
+        return(
+          <div className="flex flex-row space-x-4">
+          <input type="text" key={index} className="input input-bordered w-full max-w-xs" placeholder="Question" defaultValue={question.text} onChange={(e) => {questionTemp[index].text = e.target.value}}/>
+          <select onChange={(e) => {questionTemp[index].type = e.target.value}} className="select select-bordered w-24 max-w-xs">
+            <option>Text</option>
+            <option>Photo</option>
+          </select>
+          <IconSquareX onClick={() => removeQuestion(index)} className="w-12 h-12"/>
+          </div>
+        )
+      })}
+      </div>
+      <button className="btn btn-primary" onClick={addQuestion}>Add question</button>
+      <div className="modal-action">
+        <form method="dialog">
+          {/* if there is a button in form, it will close the modal */}
+          <button className="btn" onClick={() => setQuestions(questionTemp)}>Save</button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+</>
+}

components/modeCard.tsx

@@ -0,0 +1,9 @@
+export default function ModeCard({ mode, selected, onChange }){
+  const Icon = mode.icon
+  return <>
+    <div onClick={onChange} className={`w-24 h-24 rounded-md flex p-4 flex-col items-center ${selected ? "bg-primary" : "bg-zinc-300"}`}>
+      <Icon className="w-12 h-12" />
+      <p>{mode.name}</p>
+    </div>
+  </>
+}