Feat: Add Synergy and Details to commander cards

app/components/ui/card-group.tsx

@@ -1,18 +1,19 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import { MTGCardProps } from "@/components/ui/mtg-card"
 import { MTGCard } from '@/components/ui/mtg-card'
 
 interface carte_from_stats {
   id: string,
   name: string,
   normal_image: string,
+  url: string,
   sanitized_name: string,
   nbr_decks: number,
   total_decks: number,
   percent_decks: number,
   price: string,
+  synergy?: number
   cardmarket_uri: string
 }
 
@@ -23,11 +24,12 @@ interface CardGroupProps {
   showPrice?:       boolean,
   showStats?:       boolean,
   showPercent?:     boolean,
+  commanderUrl?:    boolean,
   id?:              string,
   Icon?:            any
 }
 
-const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true,showPercent=true, id, Icon}: CardGroupProps) => {
+const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true,showPercent=true, commanderUrl=false, id, Icon}: CardGroupProps) => {
   return (
     <div id={id} className={cn('flex flex-col w-full items-start',className)}>
       <div className="flex items-center flex-row gap-2 mb-2">
@@ -39,9 +41,11 @@ const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true
       <div
         className="flex flex-row flex-wrap gap-4"
       >
-
-          {cards.map((card: carte_from_stats) => (
-            <MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={showPercent ? card.percent_decks : undefined} price={card.price} cardmarketURI={card.cardmarket_uri}/>
+          {cards.length == 0 && (
+            <span>Pas de cartes...</span>
+          )}
+          {cards.length > 0 && cards.map((card: carte_from_stats) => (
+            <MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={commanderUrl ? "/commander/card/" + card.url : undefined} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={showPercent ? card.percent_decks : undefined} price={card.price} synergy={card.synergy} cardmarketURI={card.cardmarket_uri}/>
           ))}
       </div>
     </div>

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"
 

app/components/ui/symbols-icons.tsx

@@ -4,6 +4,12 @@ interface SymbolsIconProps {
   className:    string
 }
 
+const CommanderIcon = ({ className }: SymbolsIconProps) => {
+  return (
+    <img className={cn("h-4",className)} src="/assets/commander.svg"></img>
+  )}
+CommanderIcon.displayName = "CommanderIcon"
+
 const PlaneswalkerIcon = ({ className }: SymbolsIconProps) => {
   return (
     <img className={cn("h-4",className)} src="/assets/planeswalker.svg"></img>
@@ -46,4 +52,4 @@ const LandIcon = ({ className }: SymbolsIconProps) => {
   )}
 LandIcon.displayName = "LandIcon"
 
-export { PlaneswalkerIcon, SorceryIcon, InstantIcon, CreatureIcon, ArtifactIcon, EnchantmentIcon, LandIcon }
+export { CommanderIcon, PlaneswalkerIcon, SorceryIcon, InstantIcon, CreatureIcon, ArtifactIcon, EnchantmentIcon, LandIcon }