Feat: Add creating decks

app/components/ui/mtg-card.tsx

@@ -6,10 +6,15 @@ interface MTGCardProps {
   className?: string,
   imageURI: string,
   cardname: string,
-  url: string
+  url: string,
+  nbrDecks?: number,
+  totalDecks?: number,
+  percentDecks?: number,
+  price?: string,
+  cardmarketURI?: string
 }
 
-const MTGCard = ({ className, imageURI, cardname, url }: MTGCardProps) => {
+const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, percentDecks, price, cardmarketURI }: MTGCardProps) => {
   const [loaded, setLoaded] = React.useState(false)
 
   return (
@@ -24,7 +29,17 @@ const MTGCard = ({ className, imageURI, cardname, url }: MTGCardProps) => {
         <span className="h-64 shadow">Loading...</span>
       }
       <img src={imageURI} className="rounded" height={loaded ? 'auto' : '0'} onLoad={() => {setLoaded(true)}} loading="lazy" />
-      <span className="text-center">{cardname}</span>
+      <div className="flex flex-col items-center gap-0">
+        { price != undefined && (
+          <a href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}€</a>
+        )}
+        <span className="text-center">{cardname}</span>
+        { nbrDecks != undefined && (
+          <>
+            <span className="text-xs">{nbrDecks} de {totalDecks} Decks ({percentDecks}%)</span>
+          </>
+        )}
+      </div>
     </a>
   )}
 MTGCard.displayName = "MTGCard"