73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
|
|
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-4 px-4 flex items-center justify-between gap-4">
|
|
{/* LEWA STRONA: Przycisk Home w stylu Kitty */}
|
|
<button
|
|
onClick={() => onNavigate('home')}
|
|
className="flex items-center gap-2 px-4 py-2 bg-pink-500 hover:bg-pink-600 rounded-full font-black text-white transition-all active:scale-95 shadow-lg shadow-pink-200"
|
|
>
|
|
<Cat size={20} fill="currentColor" />
|
|
<span className="text-lg tracking-tighter">KittyURL</span>
|
|
</button>
|
|
|
|
{/* PRAWA STRONA: Pozostałe przyciski zgrupowane w divie */}
|
|
<div className="flex flex-wrap justify-end gap-2 sm:gap-3">
|
|
{/* Przycisk Jump Game */}
|
|
<button
|
|
onClick={() => onNavigate('jump-game')}
|
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-100 hover:bg-pink-200 rounded-full font-bold text-pink-600 transition-all active:scale-95 text-sm sm:text-base"
|
|
>
|
|
<Gamepad2 size={18} />
|
|
<span className="hidden md:inline">Jump</span>
|
|
</button>
|
|
|
|
{/* Przycisk Flappy Cat */}
|
|
<button
|
|
onClick={() => onNavigate('flappy-game')}
|
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-blue-100 hover:bg-blue-200 rounded-full font-bold text-blue-600 transition-all active:scale-95 text-sm sm:text-base"
|
|
>
|
|
<Wind size={18} />
|
|
<span className="hidden md:inline">Flappy</span>
|
|
</button>
|
|
|
|
{/* Przycisk History */}
|
|
<button
|
|
onClick={() => onNavigate('history')}
|
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-white rounded-full font-bold text-pink-500 border border-pink-100 transition-all active:scale-95 text-sm sm:text-base"
|
|
>
|
|
<HistoryIcon size={18} />
|
|
<span className="hidden md:inline">History</span>
|
|
</button>
|
|
|
|
{/* Logowanie / Wylogowanie */}
|
|
{isAuthenticated ? (
|
|
<button
|
|
onClick={() => {
|
|
onLogout();
|
|
onNavigate('home');
|
|
}}
|
|
className="flex items-center gap-2 px-3 py-2 sm:px-4 bg-pink-50 hover:bg-pink-100 rounded-full font-bold text-pink-500 border-2 border-pink-200 transition-all active:scale-95 text-sm sm:text-base"
|
|
>
|
|
<LogOut size={18} />
|
|
<span className="hidden md:inline">Logout</span>
|
|
</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 transition-all active:scale-95 text-sm sm:text-base shadow-lg shadow-pink-200"
|
|
>
|
|
<LogIn size={18} />
|
|
<span className="hidden sm:inline">Sign In</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
); |