Feat: Implementation of New UI (Bar, Homepage, Commander, BSets), Removing NGINX dependency, Dockerfile added
This commit is contained in:
globuzma
parent
64a4c5fb87
commit
238b594b1e
31 changed files with 734 additions and 202 deletions
|
|
@ -21,18 +21,22 @@ interface CardGroupProps {
|
|||
groupName: string,
|
||||
cards: carte_from_stats[],
|
||||
showPrice?: boolean,
|
||||
showStats?: boolean
|
||||
showStats?: boolean,
|
||||
id?: string,
|
||||
Icon?: any
|
||||
}
|
||||
|
||||
const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true}: CardGroupProps) => {
|
||||
const CardGroup = ({ className, groupName, cards, showPrice=true, showStats=true, id, Icon}: CardGroupProps) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>{groupName}</h1>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-row flex-wrap gap-4 p-8",
|
||||
className
|
||||
<div id={id} className={cn('flex flex-col w-full items-start',className)}>
|
||||
<div className="flex items-center flex-row gap-2 mb-2">
|
||||
{ Icon && (
|
||||
<Icon className="h-6"/>
|
||||
)}
|
||||
<h1 className="text-3xl">{groupName}</h1>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-row flex-wrap gap-4"
|
||||
>
|
||||
|
||||
{cards.map((card: carte_from_stats) => (
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ const MTGCard = ({ className, imageURI, cardname, url, nbrDecks, totalDecks, per
|
|||
<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>
|
||||
<a className="text-xs" href={cardmarketURI != undefined ? cardmarketURI : "#"} target={cardmarketURI != undefined ? "_blank" : "_self"}>{price}€</a>
|
||||
)}
|
||||
<span className="text-center">{cardname}</span>
|
||||
<span className="text-center text-xs">{cardname}</span>
|
||||
{ nbrDecks != undefined && (
|
||||
<>
|
||||
<span className="text-xs">{nbrDecks} de {totalDecks} Decks ({percentDecks}%)</span>
|
||||
<span className="text-md">{nbrDecks} Deck{nbrDecks > 1 ? "s" : ""} sur {totalDecks} ({percentDecks}%)</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { IconUserFilled } from "@tabler/icons-react"
|
||||
import { IconChevronDown } from "@tabler/icons-react"
|
||||
import { Black, Blue, Green, White, Red, Colorless } from "@/components/ui/mana-icons"
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
|
|
@ -37,7 +38,7 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
const [bsetsList, setBsetsList] = useState<bsetJsonObject[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:8072/misc/bsets.json').then((res) => {
|
||||
fetch('/api/json/misc/bsets.json').then((res) => {
|
||||
if(res.status == 200) {
|
||||
res.json().then((data) => {
|
||||
setBsetsList(data)
|
||||
|
|
@ -49,15 +50,17 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
|
||||
|
||||
return (
|
||||
<div className="flex z-50 flex-row p-4 gap-4 w-full fixed top-0 left-0 bg-slate-700 items-center justify-between">
|
||||
<div className="flex z-50 flex-row p-4 gap-4 w-full bg-white fixed top-0 left-0 items-center justify-between">
|
||||
<div className="flex flex-row gap-4 items-center">
|
||||
<a className="flex flex-row gap-2 items-center" href="/">
|
||||
<img src="/assets/logo.png" className="h-8" />
|
||||
<span className="font-beleren text-3xl mt-2">BRAWL SET</span>
|
||||
<span className="font-beleren text-3xl mt-2 bg-gradient-to-r from-black to-orange-500 bg-clip-text text-transparent">BrawlSet</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4 items-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>Commandants</Button>
|
||||
<span className="text-stone-500 cursor-pointer flex flex-row gap-1 items-center">Commandants <IconChevronDown className="h-4"/></span>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuGroup>
|
||||
|
|
@ -117,71 +120,91 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/azorius">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Azorius</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/dimir">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Dimir</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/rakdos">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Rakdos</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/gruul">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Gruul</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/selesnya">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Selesnya</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/orzhov">
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Orzhov</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/izzet">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Izzet</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/golgari">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Golgari</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/boros">
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Boros</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/simic">
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Simic</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -196,81 +219,101 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/esper">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Esper</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/grixis">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Grixis</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/jund">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Jund</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/naya">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Naya</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/bant">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Bant</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/abzan">
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Abzan</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/jeskai">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Jeskai</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/sultai">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Sultai</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/mardu">
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Red className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Mardu</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/temur">
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Green className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Temur</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -285,56 +328,68 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/yore-tiller">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Yore-Tiller</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/glint-eye">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Glint-Eye</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/dune-brood">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Dune-Brood</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/ink-treader">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Ink-Treader</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/witch-maw">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<Green className="h-4 w-4"/>
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>Witch-Maw</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a className="flex flex-row gap-2 items-center" href="/commander/five-color">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
<div className="flex flex-row">
|
||||
<White className="h-4 w-4"/>
|
||||
<Blue className="h-4 w-4"/>
|
||||
<Black className="h-4 w-4"/>
|
||||
<Red className="h-4 w-4"/>
|
||||
<Green className="h-4 w-4"/>
|
||||
</div>
|
||||
<span>5 couleurs</span>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -346,7 +401,7 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>BSets</Button>
|
||||
<span className="text-stone-500 cursor-pointer flex flex-row gap-1 items-center">BSets <IconChevronDown className="h-4"/></span>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuGroup>
|
||||
|
|
@ -373,23 +428,23 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
|
|||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<a href="/rules"><Button>Règles</Button></a>
|
||||
<a href="/rules" className="text-stone-500">Règles</a>
|
||||
<a href="/faq" className="text-stone-500">FAQ</a>
|
||||
</div>
|
||||
<div className="flex flex-row gap-4">
|
||||
<Input placeholder="Rechercher des cartes" />
|
||||
{ !isLoggedIn &&
|
||||
<>
|
||||
<a href="/account/signin"><Button>Connexion</Button></a>
|
||||
<Button disabled={true}>Inscription</Button>
|
||||
<a href="/account/signin" className="text-stone-500">Connexion</a>
|
||||
<Button disabled={true} className="text-stone-500">Inscription</Button>
|
||||
</>
|
||||
}
|
||||
{
|
||||
isLoggedIn &&
|
||||
<>
|
||||
<a href="/account/profile/decks" className="flex flex-row items-center gap-2"><span className="text-gray-400">Decks</span></a>
|
||||
<a href="/account/profile/decks" className="flex flex-row items-center gap-2 text-stone-500">Decks</a>
|
||||
<a href="/account/profile" className="flex flex-row items-center gap-2">
|
||||
<IconUserFilled color="gray" />
|
||||
<span className="text-gray-400">{username}</span>
|
||||
<IconUserFilled color="stone-500" />
|
||||
<span className="text-stone-500">{username}</span>
|
||||
</a>
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
49
app/components/ui/symbols-icons.tsx
Normal file
49
app/components/ui/symbols-icons.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface SymbolsIconProps {
|
||||
className: string
|
||||
}
|
||||
|
||||
const PlaneswalkerIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/planeswalker.svg"></img>
|
||||
)}
|
||||
PlaneswalkerIcon.displayName = "PlaneswalkerIcon"
|
||||
|
||||
const SorceryIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/sorcery.svg"></img>
|
||||
)}
|
||||
SorceryIcon.displayName = "SorceryIcon"
|
||||
|
||||
const InstantIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/instant.svg"></img>
|
||||
)}
|
||||
InstantIcon.displayName = "InstantIcon"
|
||||
|
||||
const CreatureIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/creature.svg"></img>
|
||||
)}
|
||||
CreatureIcon.displayName = "CreatureIcon"
|
||||
|
||||
const ArtifactIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/artifact.svg"></img>
|
||||
)}
|
||||
ArtifactIcon.displayName = "ArtifactIcon"
|
||||
|
||||
const EnchantmentIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/enchantment.svg"></img>
|
||||
)}
|
||||
EnchantmentIcon.displayName = "EnchantmentIcon"
|
||||
|
||||
const LandIcon = ({ className }: SymbolsIconProps) => {
|
||||
return (
|
||||
<img className={cn("h-4",className)} src="/assets/land.svg"></img>
|
||||
)}
|
||||
LandIcon.displayName = "LandIcon"
|
||||
|
||||
export { PlaneswalkerIcon, SorceryIcon, InstantIcon, CreatureIcon, ArtifactIcon, EnchantmentIcon, LandIcon }
|
||||
Loading…
Add table
Add a link
Reference in a new issue