front/src/components/VisionQuestion.jsx - main - TimurIsm/OpenEyes

front/src/components/VisionQuestion.jsx
51 строка2 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React from 'react';

const isImageUrl = (url) => {
    if (!url) return false;
    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
    return imageExtensions.some(ext => url.toLowerCase().endsWith(ext));
};

const VisionQuestion = ({ question, userAnswer, index, isCorrect }) => {
    return (
        <div className="border border-gray-300 rounded-lg p-4 mb-3">
            <div className="mb-3">
                <h4 className="font-medium mb-1">Задание {index + 1}</h4>
                {isImageUrl(question.content) ? (
                    <div className="relative w-full h-[200px] mb-3 overflow-hidden rounded-lg border border-gray-300">
                        <img
                            src={question.content}
                            className="w-full h-full object-contain"
                            alt={`Задание ${index + 1}`}
                            onError={(e) => {
                                e.target.style.display = 'none';
                                e.target.parentElement.innerHTML = `
                                    <div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">
                                        <p>Изображение не найдено</p>
                                    </div>
                                `;
                            }}
                        />
                    </div>
                ) : (
                    <p className="text-gray-600">{question.content}</p>
                )}
            </div>
            <div className="space-y-1 text-sm">
                <div className="flex items-center justify-between">
                    <div>
                        <span className="font-medium">Ваш ответ:</span> 
                        <span className="ml-2">{userAnswer || 'Нет ответа'}</span>
                    </div>
                    {isCorrect !== null && (
                        <span className={`px-2 py-1 text-xs rounded ${isCorrect ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                            {isCorrect ? '✓ Верно' : '✗ Неверно'}
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
};

export default VisionQuestion;