diff --git a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2f5118ca5a3c2b99244bd8ed6bccdbd1f04b4b9a --- /dev/null +++ b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx @@ -0,0 +1,49 @@ +import { Dispatch, FC, FormEvent, SetStateAction } from 'react'; + +type NewQuestionFormProps = { + newQuestion: string; + setNewQuestion: Dispatch<SetStateAction<string>>; + onSubmit: () => void; +}; + +const NewQuestionForm: FC<NewQuestionFormProps> = ({ newQuestion, setNewQuestion, onSubmit }) => { + const onFormSubmit = (e: FormEvent<HTMLFormElement>): void => { + e.preventDefault(); + onSubmit(); + }; + + return ( + <div className="flex flex-col items-center align-center py-3 pt-20 shadow-md w-full shrink-0 grow-0"> + {/* Title */} + <h2 className="text-xl font-semibold leading-7 text-gray-900">New Question</h2> + + {/* Description */} + <p className="mt-1 text-sm leading-6 text-gray-600 text-center"> + As an admin, you can input your own question for the system to choose from. + </p> + + {/* Question Form */} + <form className="flex flex-col align-center items-center pt-8 w-3/5" onSubmit={onFormSubmit}> + {/* Text Input */} + <input + type="text" + name="new-question" + id="new-question" + className="block w-1/2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + value={newQuestion} + onChange={(e) => setNewQuestion(e.target.value)} + /> + + {/* Submit Button */} + <button + type="submit" + className="rounded-md bg-c-pink px-3 py-2 mt-6 text-sm font-semibold text-white shadow-sm hover:bg-c-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + > + Insert + </button> + </form> + </div> + ); +}; + +export default NewQuestionForm;