brawlset/app/components/ui/card-group.tsx
2025-01-27 12:40:17 +01:00

46 lines
1.2 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
}
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 }