| 83 | |
| 84 | // Function to render the Question Card |
| 85 | const renderQuestionCard = (question, props) => { |
| 86 | return ( |
| 87 | <div |
| 88 | className={`${props.mode === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800' |
| 89 | } p-6 rounded-lg shadow-lg mb-6 w-full md:w-[48%] lg:w-[30%] transition-transform transform hover:scale-105`} |
| 90 | key={question._id} |
| 91 | > |
| 92 | <p className="text-xl font-semibold">{question.content}</p> |
| 93 | {question.answered ? ( |
| 94 | <div className={`mt-4 p-4 rounded-md shadow-md ${props.mode === 'dark' ? 'bg-gray-700' : 'bg-white'}`}> |
| 95 | <h3 className="text-lg font-semibold">Answer:</h3> |
| 96 | <p>{question.answer}</p> |
| 97 | </div> |
| 98 | ) : ( |
| 99 | <AnswerForm questionId={question._id} /> |
| 100 | )} |
| 101 | </div> |
| 102 | ); |
| 103 | }; |
| 104 | |
| 105 | // Function to render the Answer Form |
| 106 | const AnswerForm = ({ questionId }) => { |