57 lines
1.3 KiB
React
57 lines
1.3 KiB
React
|
import './Answer.css'
|
||
|
|
|
||
|
|
const Answer = ({ answer, index, onClick, isRevealed }) => {
|
||
|
|
const getAnswerClass = () => {
|
||
|
|
if (!isRevealed) return 'answer-hidden'
|
||
|
|
return 'answer-revealed'
|
||
|
|
}
|
||
|
|
|
||
|
|
const getPointsColor = (points) => {
|
||
|
|
if (points >= 80) return '#4ecdc4'
|
||
|
|
if (points >= 60) return '#95e1d3'
|
||
|
|
if (points >= 40) return '#fce38a'
|
||
|
|
if (points >= 20) return '#f38181'
|
||
|
|
return '#ff6b6b'
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={`answer-button ${getAnswerClass()}`}
|
||
|
|
onClick={onClick}
|
||
|
|
disabled={isRevealed}
|
||
|
|
style={
|
||
|
|
isRevealed
|
||
|
|
? {
|
||
|
|
borderColor: getPointsColor(answer.points),
|
||
|
|
background: `linear-gradient(135deg, ${getPointsColor(
|
||
|
|
answer.points
|
||
|
|
)}20, ${getPointsColor(answer.points)}40)`,
|
||
|
|
}
|
||
|
|
: {}
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{isRevealed ? (
|
||
|
|
<>
|
||
|
|
<span className="answer-text">{answer.text}</span>
|
||
|
|
<span
|
||
|
|
className="answer-points"
|
||
|
|
style={{ color: getPointsColor(answer.points) }}
|
||
|
|
>
|
||
|
|
{answer.points}
|
||
|
|
</span>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<span
|
||
|
|
className="answer-points-hidden"
|
||
|
|
style={{ color: getPointsColor(answer.points) }}
|
||
|
|
>
|
||
|
|
{answer.points}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Answer
|
||
|
|
|