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:18:22 +02:00
parent c3cc4e59f6
commit 80216ae478
1 changed files with 76 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/DeckCard.tsx
View File

@@ -1,77 +1,77 @@
import React from 'react'; import React from 'react';
import { AlertTriangle, Check, Edit } from 'lucide-react'; import { AlertTriangle, Check, Edit } from 'lucide-react';
import { Deck } from '../types'; import { Deck } from '../types';
import { validateDeck } from '../utils/deckValidation'; import { validateDeck } from '../utils/deckValidation';
interface DeckCardProps { interface DeckCardProps {
deck: Deck; deck: Deck;
onEdit?: (deckId: string) => void; onEdit?: (deckId: string) => void;
} }
export default function DeckCard({ deck, onEdit }: DeckCardProps) { export default function DeckCard({ deck, onEdit }: DeckCardProps) {
if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){ if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
console.log("deck", deck.name); console.log("deck", deck.name);
console.log("cardEntities", deck.cards); console.log("cardEntities", deck.cards);
} }
const validation = validateDeck(deck); const validation = validateDeck(deck);
const commander = deck.format === 'commander' ? deck.cards.find(card => const commander = deck.format === 'commander' ? deck.cards.find(card =>
card.is_commander card.is_commander
)?.card : null; )?.card : null;
return ( return (
<div <div
className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
onClick={() => onEdit?.(deck.id)} onClick={() => onEdit?.(deck.id)}
> >
<div className="relative h-48 overflow-hidden"> <div className="relative h-48 overflow-hidden">
<img <img
src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal} src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
alt={commander?.name || deck.cards[0]?.card.name} alt={commander?.name || deck.cards[0]?.card.name}
className="w-full object-cover object-top transform translate-y-[-12%]" className="w-full object-cover object-top transform translate-y-[-12%]"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h3 className="text-xl font-bold text-white">{deck.name}</h3> <h3 className="text-xl font-bold text-white">{deck.name}</h3>
{validation.isValid ? ( {validation.isValid ? (
<div className="flex items-center text-green-400"> <div className="flex items-center text-green-400">
<Check size={16} className="mr-1" /> <Check size={16} className="mr-1" />
<span className="text-sm">Legal</span> <span className="text-sm">Legal</span>
</div> </div>
) : ( ) : (
<div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}> <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
<AlertTriangle size={16} className="mr-1" /> <AlertTriangle size={16} className="mr-1" />
<span className="text-sm">Issues</span> <span className="text-sm">Issues</span>
</div> </div>
)} )}
</div> </div>
<div className="flex items-center justify-between text-sm text-gray-400"> <div className="flex items-center justify-between text-sm text-gray-400">
<span className="capitalize">{deck.format}</span> <span className="capitalize">{deck.format}</span>
<span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span> <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
</div> </div>
{commander && ( {commander && (
<div className="mt-2 text-sm text-gray-300"> <div className="mt-2 text-sm text-gray-300">
<span className="text-blue-400">Commander:</span> {commander.name} <span className="text-blue-400">Commander:</span> {commander.name}
</div> </div>
)} )}
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onEdit?.(deck.id); onEdit?.(deck.id);
}} }}
className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white" className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
> >
<Edit size={20} /> <Edit size={20} />
Edit Deck Edit Deck
</button> </button>
</div> </div>
</div> </div>
); );
} }