51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
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,
|
|
showPercent?: boolean,
|
|
id?: string,
|
|
Icon?: any
|
|
}
|
|
|
|
const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true,showPercent=true, 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">
|
|
{ Icon && (
|
|
<Icon className="h-6"/>
|
|
)}
|
|
<h1 className="text-3xl">{groupName}</h1>
|
|
</div>
|
|
<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}/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
MTGCard.displayName = "MTGCard"
|
|
|
|
export { CardGroup }
|