47 lines
1.3 KiB
TypeScript
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 }
|