matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update components with CSS animations

Browse Source
This commit is contained in:
matthieu
2025-10-23 16:19:32 +02:00
parent a76f8176f6
commit 19898d9f5e
1 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/MagicCard.tsx
View File

@@ -7,20 +7,20 @@ interface MagicCardProps {
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>
)} )}