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

47 lines
1.3 KiB
TypeScript

import * as React from "react"
import { cn } from "@/lib/utils"
interface MTGCardProps {
className?: string,
imageURI: string,
cardname: string,
url: string,
nbrDecks?: number,
totalDecks?: number,
percentDecks?: number,
price?: string,
cardmarketURI?: string
}
const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, percentDecks, price, cardmarketURI }: MTGCardProps) => {
const [loaded, setLoaded] = React.useState(false)
return (
<a
href={url}
className={cn(
"flex flex-col w-48",
className
)}
>
{!loaded &&
<span className="h-64 shadow">Loading...</span>
}
<img src={imageURI} className="rounded" height={loaded ? 'auto' : '0'} onLoad={() => {setLoaded(true)}} loading="lazy" />
<div className="flex flex-col items-center gap-0">
{ price != undefined && (
<a href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}</a>
)}
<span className="text-center">{cardname}</span>
{ nbrDecks != undefined && (
<>
<span className="text-xs">{nbrDecks} de {totalDecks} Decks ({percentDecks}%)</span>
</>
)}
</div>
</a>
)}
MTGCard.displayName = "MTGCard"
export { MTGCard, type MTGCardProps }