start work on the frontend

src/components/navbar.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import Logo from "./logo";
+
+type Page = {
+  title: string;
+  url: string;
+};
+
+const pages: Page[] = [
+  { title: "Home", url: "/" },
+  { title: "Player", url: "/player" },
+];
+
+export default function NavBar() {
+  return (
+    <div className="bg-secondary w-full rounded-lg flex items-center gap-3">
+      <div className="flex items-center gap-2 pr-3">
+        <Logo />
+        <Link href="/">
+          <p>Minecraft Utilities</p>
+        </Link>
+      </div>
+      {pages.map((page, index) => {
+        return (
+          <div key={index} className="pt-4 pb-4 w-fit rounded-lg">
+            <Link href={page.url}>
+              <p className="hover:text-primary transition-all">{page.title}</p>
+            </Link>
+          </div>
+        );
+      })}
+    </div>
+  );
+}