38 lines
1.5 KiB
JavaScript
38 lines
1.5 KiB
JavaScript
function TeamScores({ teams, myTeamId }) {
|
|
return (
|
|
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 mb-4 md:mb-6">
|
|
{teams.map((team, index) => {
|
|
const isMe = team.id === myTeamId
|
|
const colors = [
|
|
'from-blue-600/30 to-blue-800/30 border-blue-400/30',
|
|
'from-purple-600/30 to-purple-800/30 border-purple-400/30',
|
|
'from-emerald-600/30 to-emerald-800/30 border-emerald-400/30',
|
|
'from-amber-600/30 to-amber-800/30 border-amber-400/30',
|
|
'from-rose-600/30 to-rose-800/30 border-rose-400/30',
|
|
'from-cyan-600/30 to-cyan-800/30 border-cyan-400/30',
|
|
]
|
|
const colorClass = colors[index % colors.length]
|
|
|
|
return (
|
|
<div
|
|
key={team.id}
|
|
className={`p-3 md:p-5 rounded-xl border backdrop-blur-sm transition-all duration-300 ${
|
|
isMe
|
|
? 'bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border-blue-400/50 glow-blue scale-[1.02]'
|
|
: `bg-gradient-to-br ${colorClass}`
|
|
}`}
|
|
>
|
|
<h3 className="text-sm md:text-lg font-bold text-white mb-0.5 md:mb-1 truncate">
|
|
{isMe && '⭐ '}{team.name}
|
|
</h3>
|
|
<p className="font-display text-xl md:text-3xl font-bold text-gradient-gold">{team.score}</p>
|
|
<p className="text-[10px] md:text-xs text-gray-400">баллов</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TeamScores
|