37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
import * as React from "react"
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
import type { carte } from '@prisma/client'
|
||
|
|
import { Spinner } from "./spinner"
|
||
|
|
|
||
|
|
interface carteWithProps {
|
||
|
|
carte: carte
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const MTGCardTextHover = ({ carte, className }: carteWithProps) => {
|
||
|
|
const [loaded, setLoaded] = React.useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-col group cursor-pointer",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span className="w-fit border-transparent border-dotted border-b-stone-500 border-b-2">{carte.name}</span>
|
||
|
|
<div className="MTGCardTooltip absolute hidden group-hover:block group-active:block">
|
||
|
|
{!loaded &&
|
||
|
|
<div className="mt-8 flex flex-col items-center justify-center h-96 w-64 bg-stone-500 rounded-md">
|
||
|
|
<Spinner />
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
<img src={carte.normal_image} className={ loaded ? "rounded-md mt-8 h-96" : "absolute opacity-0 h-96" } onLoad={() => {setLoaded(true)}} loading="lazy" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
MTGCardTextHover.displayName = "MTGCardTextHover"
|
||
|
|
|
||
|
|
export { MTGCardTextHover }
|