Feat: Add Synergy and Details to commander cards

app/components/ui/mtg-card.tsx

@@ -4,33 +4,35 @@ import { cn } from "@/lib/utils"
 import { Spinner } from "./spinner"
 
 interface MTGCardProps {
-  className?: string,
-  imageURI: string,
-  cardname: string,
-  url: string,
-  nbrDecks?: number,
-  totalDecks?: number,
-  percentDecks?: number,
-  price?: string,
+  className?:     string,
+  imageURI:       string,
+  cardname:       string,
+  url?:            string,
+  nbrDecks?:      number,
+  totalDecks?:    number,
+  percentDecks?:  number,
+  synergy?:       number,
+  price?:         string,
   cardmarketURI?: string
 }
 
-const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, percentDecks, price, cardmarketURI }: MTGCardProps) => {
+const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, percentDecks, price, synergy, cardmarketURI }: MTGCardProps) => {
   const [loaded, setLoaded] = React.useState(false)
 
   return (
-    <div
+    <a
       className={cn(
         "flex flex-col w-48",
         className
       )}
+      href={url != undefined ? url : "#"}
     >
       {!loaded && 
         <div className="flex flex-col items-center justify-center h-64 bg-stone-500 rounded-md">
           <Spinner />
         </div>
       }
-      <img src={imageURI} className={ loaded ? "rounded h-64" : "absolute opacity-0" }  onLoad={() => {setLoaded(true)}} loading="lazy" />
+      <img src={imageURI} className={ cn(loaded ? "rounded h-64" : "absolute opacity-0", className) }  onLoad={() => {setLoaded(true)}} loading="lazy" />
       <div className="flex flex-col items-center gap-0">
         { price != undefined && (
           <a className="text-xs" href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}€</a>
@@ -42,8 +44,9 @@ const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, per
               { percentDecks != undefined && ( <span> sur {totalDecks} ({percentDecks}%)</span>)}</span>
           </>
         )}
+        { synergy != undefined && ( <span className="text-md">{synergy}% Synergie</span> )}
       </div>
-    </div>
+    </a>
   )}
 MTGCard.displayName = "MTGCard"