❇️V2

app/components/link.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+export default function Link({
+  link,
+  children,
+}: PropsWithChildren<{ link: string }>) {
+  return (
+    <a
+      className="rounded-md drop-shadow-lg bg-blue-700 px-2 py-1 text-white hover:bg-blue-800"
+      href={link}
+    >
+      {children}
+    </a>
+  );
+}

app/components/navbar.tsx

@@ -0,0 +1,10 @@
+import Link from "./link";
+
+export default function Navbar() {
+  return (
+    <div className="bg-slate-700 rounded-md p-2 mx-2 mt-2 w-[calc(100vw-16px)] flex gap-2 fixed">
+      <Link link="/" children="Home" />
+      <Link link="/contact" children="Contact" />
+    </div>
+  );
+}