Fix: Add typo and icons in Navigation Bar

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;

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 }

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>