diff --git a/app/app/fonts/Beleren2016-Bold.woff b/app/app/fonts/Beleren2016-Bold.woff
new file mode 100644
index 0000000..b716efa
Binary files /dev/null and b/app/app/fonts/Beleren2016-Bold.woff differ
diff --git a/app/app/globals.css b/app/app/globals.css
index 4b28afe..c26cc9e 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -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;
diff --git a/app/components/ui/mana-icons.tsx b/app/components/ui/mana-icons.tsx
new file mode 100644
index 0000000..91e4f94
--- /dev/null
+++ b/app/components/ui/mana-icons.tsx
@@ -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 }
diff --git a/app/components/ui/navigation-bar.tsx b/app/components/ui/navigation-bar.tsx
index 1515bea..357b0c2 100644
--- a/app/components/ui/navigation-bar.tsx
+++ b/app/components/ui/navigation-bar.tsx
@@ -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>
diff --git a/app/public/assets/logo.png b/app/public/assets/logo.png
new file mode 100644
index 0000000..52dfcaf
Binary files /dev/null and b/app/public/assets/logo.png differ