Initial ui

app/components/NavBar.tsx

@@ -0,0 +1,35 @@
+interface NavBarProps {
+  online: boolean;
+}
+
+export default function NavBar({ online }: NavBarProps) {
+  return (
+    <nav className="flex items-center justify-between pt-7 pb-6 mb-13 border-b border-gray-200">
+      <div className="flex items-center gap-3">
+        <span
+          className="text-lg font-medium tracking-tight text-gray-900"
+          style={{ fontFamily: "'Playfair Display', serif" }}
+        >
+           Jack&apos;s Servers
+        </span>
+      </div>
+
+      <div
+        className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
+          online
+            ? "text-green-700 bg-green-50 border-green-200"
+            : "text-gray-500 bg-gray-50 border-gray-200"
+        }`}
+      >
+        <span
+          className="w-1.5 h-1.5 rounded-full"
+          style={{
+            background: online ? "#22c55e" : "#d1d5db",
+            animation: online ? "pulse-dot 2s infinite" : "none",
+          }}
+        />
+        {online ? "Online" : "Connecting..."}
+      </div>
+    </nav>
+  );
+}