Feat: Add commander and Bset stats

app/components/ui/card-group.tsx

@@ -0,0 +1,46 @@
+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,
+  sanitized_name: string,
+  nbr_decks: number,
+  total_decks: number,
+  percent_decks: number,
+  price: string,
+  cardmarket_uri: string
+}
+
+interface CardGroupProps {
+  className?:      string,
+  groupName:       string,
+  cards:           carte_from_stats[],
+  showPrice?:      boolean,
+  showStats?:      boolean
+}
+
+const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true}: CardGroupProps) => {
+  return (
+    <div>
+      <h1>{groupName}</h1>
+      <div
+        className={cn(
+          "flex flex-row flex-wrap gap-4 p-8",
+          className
+        )}
+      >
+
+          {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={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
+          ))}
+      </div>
+    </div>
+  )}
+MTGCard.displayName = "MTGCard"
+
+export { CardGroup }