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

Fix: Add typo and icons in Navigation Bar

Browse source
This commit is contained in:
globuzma 2024-11-21 17:16:21 +01:00
parent 079d2010de
commit cbaf27321c
5 changed files with 224 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/app/fonts/Beleren2016-Bold.woff Normal file
View file

Binary file not shown.

9
app/app/globals.css
View file

@ -6,6 +6,15 @@ body {
font-family: Arial, Helvetica, sans-serif;
}
@font-face {
font-family: "Beleren";
src: url("./fonts/Beleren2016-Bold.woff");
}
.font-beleren {
font-family: 'Beleren';
}
@layer utilities {
.text-balance {
text-wrap: balance;

97
app/components/ui/mana-icons.tsx Normal file
View file

@ -0,0 +1,97 @@
import { cn } from "@/lib/utils"
interface manaIcon {
className: string
}
const Black = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/B.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
Black.displayName = "Black"
const Blue = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/U.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
Blue.displayName = "Blue"
const Green = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/G.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
Green.displayName = "Green"
const White = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/W.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
White.displayName = "White"
const Red = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/R.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
Red.displayName = "Red"
const Colorless = ({ className, ...props }: manaIcon) => {
return (
<img
src="https://svgs.scryfall.io/card-symbols/C.svg"
loading="lazy"
className={cn(
"",
className
)}
{...props}
/>
)
}
Colorless.displayName = "Colorless"
export { Black, Blue, Green, White, Red, Colorless }

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

@ -17,6 +17,7 @@ import {
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { IconUserFilled } from "@tabler/icons-react"
import { Black, Blue, Green, White, Red, Colorless } from "@/components/ui/mana-icons"
interface NavigationProps {
isLoggedIn: boolean,
@ -27,7 +28,10 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
return (
<div className="flex flex-row p-4 gap-4 w-full fixed top-0 left-0 bg-slate-700 items-center justify-between">
<div className="flex flex-row gap-4 items-center">
<a href="/">Brawl Set</a>
<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>
</a>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Cartes</Button>
@ -50,21 +54,27 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<White className="h-4 w-4"/>
<span>Blanc</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Blue className="h-4 w-4"/>
<span>Bleu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Black className="h-4 w-4"/>
<span>Noir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Red className="h-4 w-4"/>
<span>Rouge</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Green className="h-4 w-4"/>
<span>Vert</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Colorless className="h-4 w-4"/>
<span>Incolor</span>
</DropdownMenuItem>
<DropdownMenuItem>
@ -149,21 +159,27 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<White className="h-4 w-4"/>
<span>Blanc</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Blue className="h-4 w-4"/>
<span>Bleu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Black className="h-4 w-4"/>
<span>Noir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Red className="h-4 w-4"/>
<span>Rouge</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Green className="h-4 w-4"/>
<span>Vert</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Colorless className="h-4 w-4"/>
<span>Incolor</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
@ -176,34 +192,54 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WU Azorius</span>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<span>Azorius</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UB Dimir</span>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<span>Dimir</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BR Rakdos</span>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<span>Rakdos</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RG Gruul</span>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<span>Gruul</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GW Selesnya</span>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<span>Selesnya</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WB Orzhov</span>
<White className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<span>Orzhov</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UR Izzet</span>
<Blue className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<span>Izzet</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BG Golgari</span>
<Black className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<span>Golgari</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RW Boros</span>
<Red className="h-4 w-4"/>
<White className="h-4 w-4"/>
<span>Boros</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GU Simic</span>
<Green className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<span>Simic</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
@ -215,34 +251,64 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WUB Esper</span>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<span>Esper</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UBR Grixis</span>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<span>Grixis</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BRG Jund</span>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<span>Jund</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RGW Naya</span>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<span>Naya</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GWU Bant</span>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<span>Bant</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WBG Abzan</span>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<span>Abzan</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>URW Jeskai</span>
<Blue className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<White className="h-4 w-4"/>
<span>Jeskai</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BGU Sultai</span>
<Black className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<span>Sultai</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RWB Mardu</span>
<Red className="h-4 w-4"/>
<White className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<span>Mardu</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GUR Temur</span>
<Green className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<span>Temur</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
@ -254,22 +320,47 @@ export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<span>WUBR Yore-Tiller</span>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<span>Yore-Tiller</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>UBRG Glint-Eye</span>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<span>Glint-Eye</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>BRGW Dune-Brood</span>
<Black className="h-4 w-4"/>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<span>Dune-Brood</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>RGWU Ink-Treader</span>
<Red className="h-4 w-4"/>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<span>Ink-Treader</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>GWUB Witch-Maw</span>
<Green className="h-4 w-4"/>
<White className="h-4 w-4"/>
<Blue className="h-4 w-4"/>
<Black className="h-4 w-4"/>
<span>Witch-Maw</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>WBBRG 5 couleurs</span>
<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"/>
<span>5 couleurs</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>

BIN
app/public/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB