src/components/MagicCard.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
+import React from 'react';
-import { Card } from '../types';
+import { Card } from '../types';
-
+
-interface MagicCardProps {
+interface MagicCardProps {
-  card: Card;
+  card: Card;
-}
+}
-
+
-const MagicCard = ({ card }: MagicCardProps) => {
+const MagicCard = ({ card }: MagicCardProps) => {
-  return (
+  return (
-    <div className="relative">
+    <div className="relative card-hover animate-fade-in">
-      {card.image_uris?.normal ? (
+      {card.image_uris?.normal ? (
-        <img
+        <img
-          src={card.image_uris.normal}
+          src={card.image_uris.normal}
-          alt={card.name}
+          alt={card.name}
-          className="w-full h-auto rounded-lg"
+          className="w-full h-auto rounded-lg transition-smooth"
-        />
+        />
-      ) : (
+      ) : (
-        <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400">
+        <div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400 transition-smooth">
-          No Image Available
+          No Image Available
-        </div>
+        </div>
-      )}
+      )}
-      {card.prices?.usd && (
+      {card.prices?.usd && (
-        <div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg">
+        <div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg transition-smooth">
-          ${card.prices.usd}
+          ${card.prices.usd}
-        </div>
+        </div>
-      )}
+      )}
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
 export default MagicCard;