32 lines
749 B
TypeScript
32 lines
749 B
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface MTGCardProps {
|
|
className?: string,
|
|
imageURI: string,
|
|
cardname: string,
|
|
url: string
|
|
}
|
|
|
|
const MTGCard = ({ className, imageURI, cardname, url }: 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" />
|
|
<span className="text-center">{cardname}</span>
|
|
</a>
|
|
)}
|
|
MTGCard.displayName = "MTGCard"
|
|
|
|
export { MTGCard }
|