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

Feat: Add card list and top structure

Browse source
This commit is contained in:
globuzma 2024-12-05 17:08:50 +01:00
parent 8e33dd45fe
commit eec6c6bfe8
19 changed files with 994 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/components/ui/mtg-card.tsx Normal file
View file

@ -0,0 +1,32 @@
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 }

40
app/components/ui/navigation-bar.tsx
View file

@ -54,31 +54,45 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<White className="h-4 w-4"/>
<span>Blanc</span>
<a className="flex flex-row gap-2" href="/top/white">
<White className="h-4 w-4"/>
<span>Blanc</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Blue className="h-4 w-4"/>
<span>Bleu</span>
<a className="flex flex-row gap-2" href="/top/blue">
<Blue className="h-4 w-4"/>
<span>Bleu</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Black className="h-4 w-4"/>
<span>Noir</span>
<a className="flex flex-row gap-2" href="/top/blue">
<Black className="h-4 w-4"/>
<span>Noir</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Red className="h-4 w-4"/>
<span>Rouge</span>
<a className="flex flex-row gap-2" href="/top/red">
<Red className="h-4 w-4"/>
<span>Rouge</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Green className="h-4 w-4"/>
<span>Vert</span>
<a className="flex flex-row gap-2" href="/top/green">
<Green className="h-4 w-4"/>
<span>Vert</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<Colorless className="h-4 w-4"/>
<span>Incolor</span>
<a className="flex flex-row gap-2" href="/top/colorless">
<Colorless className="h-4 w-4"/>
<span>Incolor</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Multicolor</span>
<a className="flex flex-row gap-2" href="/top/multicolor">
<span>Multicolor</span>
</a>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>