feat: sign in sign up with all views

kittyurl-frontend/src/components/Navbar.tsx

@@ -0,0 +1,57 @@
+import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind } from 'lucide-react';
+// Używamy 'import type' dla zadowolenia verbatimModuleSyntax
+import type { View } from '../App';
+
+interface NavbarProps {
+    onNavigate: (view: View) => void;
+    isAuthenticated: boolean;
+    onLogout: () => void;
+}
+
+export const Navbar = ({ onNavigate, isAuthenticated, onLogout }: NavbarProps) => (
+    <nav className="max-w-5xl mx-auto py-6 px-6 flex justify-end gap-3">
+        {/* Przycisk Jump Game */}
+        <button
+            onClick={() => onNavigate('jump-game')}
+            className="flex items-center gap-2 px-4 py-2 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95"
+        >
+            <Gamepad2 size={18} /> Jump
+        </button>
+
+        {/* Przycisk Flappy Cat */}
+        <button
+            onClick={() => onNavigate('flappy-game')}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95"
+        >
+            <Wind size={18} /> Flappy
+        </button>
+
+        {/* Przycisk History */}
+        <button
+            onClick={() => onNavigate('history')}
+            className="flex items-center gap-2 px-4 py-2 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95"
+        >
+            <HistoryIcon size={18} /> History
+        </button>
+
+        {/* Dynamiczny przycisk Logowania / Wylogowania */}
+        {isAuthenticated ? (
+            <button
+                onClick={() => {
+                    onLogout();
+                    onNavigate('home');
+                }}
+                className="flex items-center gap-2 px-4 py-2 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95"
+            >
+                <LogOut size={18} /> Logout
+            </button>
+        ) : (
+            <button
+                onClick={() => onNavigate('login')}
+                className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-bold text-white shadow-lg shadow-pink-200 transition-all active:scale-95"
+            >
+                <LogIn size={18} /> Sign In
+            </button>
+        )}
+    </nav>
+);