globuzma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects 2 Releases Packages 1 Wiki Activity

Feat: Change deck management UI

Browse source
This commit is contained in:
zuma 2025-02-12 15:31:51 +01:00
parent 36439c0837
commit 3a766620b7
21 changed files with 1955 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/components/ui/mtg-card.tsx
View file

@ -1,6 +1,7 @@
import * as React from "react"
import { cn } from "@/lib/utils"
import { Spinner } from "./spinner"
interface MTGCardProps {
className?: string,
@ -26,9 +27,11 @@ const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, per
)}
>
{!loaded &&
<span className="h-64 shadow">Loading...</span>
<div className="flex flex-col items-center justify-center h-64 bg-stone-500 rounded-md">
<Spinner />
</div>
}
<img src={imageURI} className="rounded" height={loaded ? 'auto' : '0'} onLoad={() => {setLoaded(true)}} loading="lazy" />
<img src={imageURI} className={ loaded ? "rounded h-64" : "absolute opacity-0" } onLoad={() => {setLoaded(true)}} loading="lazy" />
<div className="flex flex-col items-center gap-0">
{ price != undefined && (
<a className="text-xs" href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}€</a>