feat(frontend): ✨ Add @iconify/react package and update Navbar (#56)

* feat(frontend): ✨ Add @iconify/react package and update Navbar component * style(frontend): 🎨 apply prettier formatting
NTNU-SmallSatLab · Jan 29, 2024 · 17a8411 · 17a8411
1 parent 6ac01c5
commit 17a8411
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -35,6 +35,7 @@
         "@graphql-codegen/cli": "^5.0.0",
         "@graphql-codegen/client-preset": "^4.1.0",
         "@graphql-typed-document-node/core": "^3.2.0",
+        "@iconify/react": "^4.1.1",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,3 +1,7 @@
 export default function Home() {
-    return <main>Home</main>;
+    return (
+        <main>
+            <h1>Home</h1>
+        </main>
+    );
 }
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -9,6 +9,7 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useTheme } from "next-themes";
+import { Icon } from "@iconify/react";
 
 export default function Navbar() {
     const dropdownPaths = [
@@ -35,7 +36,10 @@ export default function Navbar() {
         <nav className="flex items-center justify-between p-4 bg-slate-700 dark:bg-slate-500 text-white w-full">
             <div>
                 <Link href="/">
-                    <Button variant={getButtonVariant("/")}>Logo</Button>
+                    <Button variant={getButtonVariant("/")}>
+                        Logo
+                        <Icon icon="mdi-light:home" className="size-10 ml-6" />
+                    </Button>
                 </Link>
             </div>