Feat: Add Synergy and Details to commander cards

This commit is contained in:
zuma 2025-02-19 19:55:46 +01:00
parent d402c7f2d6
commit dcbab5c99f
12 changed files with 253 additions and 29 deletions

View file

@ -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>