Spaces:
Sleeping
Sleeping
| import { useState } from 'react'; | |
| const Card = ({ card, onClick, isFlipped, isMatched }) => { | |
| return ( | |
| <div | |
| className={`relative w-24 h-24 md:w-32 md:h-32 cursor-pointer transform transition-all duration-300 ${ | |
| isFlipped || isMatched ? 'rotate-y-180' : '' | |
| }`} | |
| onClick={onClick} | |
| > | |
| <div | |
| className={`absolute inset-0 w-full h-full transition-all duration-300 ${ | |
| isFlipped || isMatched ? 'opacity-100' : 'opacity-0' | |
| }`} | |
| style={{ transform: 'rotateY(180deg)' }} | |
| > | |
| <div className="w-full h-full flex items-center justify-center bg-white rounded-lg shadow-lg border-2 border-gray-200"> | |
| <span className="text-4xl md:text-5xl">{card.emoji}</span> | |
| </div> | |
| </div> | |
| <div | |
| className={`absolute inset-0 w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg border-2 border-gray-300 ${ | |
| isFlipped || isMatched ? 'opacity-0' : 'opacity-100' | |
| }`} | |
| style={{ transform: 'rotateY(0deg)' }} | |
| > | |
| <span className="text-white text-4xl md:text-5xl">?</span> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default Card; |