Upload components/Card.jsx with huggingface_hub

components/Card.jsx

@@ -0,0 +1,33 @@
+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;