import { MAX_ANSWER_LENGTH } from 'common/answer' import Textarea from 'react-expanding-textarea' import { XIcon } from '@heroicons/react/solid' import { Col } from '../layout/col' import { Row } from '../layout/row' export function MultipleChoiceAnswers(props: { answers: string[] setAnswers: (answers: string[]) => void }) { const { answers, setAnswers } = props const setAnswer = (i: number, answer: string) => { const newAnswers = setElement(answers, i, answer) setAnswers(newAnswers) } const removeAnswer = (i: number) => { const newAnswers = answers.slice(0, i).concat(answers.slice(i + 1)) setAnswers(newAnswers) } const addAnswer = () => setAnswer(answers.length, '') return ( <Col> {answers.map((answer, i) => ( <Row className="mb-2 items-center gap-2 align-middle"> {i + 1}.{' '} <Textarea value={answer} onChange={(e) => setAnswer(i, e.target.value)} className="textarea textarea-bordered ml-2 w-full resize-none" placeholder="Type your answer..." rows={1} maxLength={MAX_ANSWER_LENGTH} /> {answers.length > 2 && ( <button onClick={() => removeAnswer(i)} type="button" className="inline-flex items-center rounded-full border border-gray-300 bg-white p-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" > <XIcon className="h-5 w-5" aria-hidden="true" /> </button> )} </Row> ))} <Row className="justify-end"> <button type="button" onClick={addAnswer} className="inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" > Add answer </button> </Row> </Col> ) } const setElement = <T,>(array: T[], i: number, elem: T) => { const newArray = array.concat() newArray[i] = elem return newArray }