kittyteam/kittyFE
3
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: responsive desing

Browse Source 
feat: load api from .env
This commit is contained in:
Pc
2025-12-31 13:28:27 +01:00
parent 311d3d75e9
commit de9486bece
7 changed files with 168 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
kittyurl-frontend/src/components/Navbar.tsx
View File

@@ -1,5 +1,4 @@
import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind } from 'lucide-react';
// Używamy 'import type' dla zadowolenia verbatimModuleSyntax
import { History as HistoryIcon, LogIn, LogOut, Gamepad2, Wind, Cat } from 'lucide-react';
import type { View } from '../App';
interface NavbarProps {
@@ -9,49 +8,66 @@ interface NavbarProps {
}
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 */}
<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('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"
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"
>
<Gamepad2 size={18} /> Jump
<Cat size={20} fill="currentColor" />
<span className="text-lg tracking-tighter">KittyURL</span>
</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 ? (
{/* 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={() => {
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"
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"
>
<LogOut size={18} /> Logout
<Gamepad2 size={18} />
<span className="hidden md:inline">Jump</span>
</button>
) : (
{/* Przycisk Flappy Cat */}
<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"
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"
>
<LogIn size={18} /> Sign In
<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>
);