78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
|
import { Outlet, Link, useNavigate } from 'react-router-dom'
|
|||
|
|
import { useAuthStore } from '@/store/auth'
|
|||
|
|
import { Gamepad2, LogOut, Trophy, User } from 'lucide-react'
|
|||
|
|
|
|||
|
|
export function Layout() {
|
|||
|
|
const { user, isAuthenticated, logout } = useAuthStore()
|
|||
|
|
const navigate = useNavigate()
|
|||
|
|
|
|||
|
|
const handleLogout = () => {
|
|||
|
|
logout()
|
|||
|
|
navigate('/login')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen flex flex-col">
|
|||
|
|
{/* Header */}
|
|||
|
|
<header className="bg-gray-800 border-b border-gray-700">
|
|||
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|||
|
|
<Link to="/" className="flex items-center gap-2 text-xl font-bold text-white">
|
|||
|
|
<Gamepad2 className="w-8 h-8 text-primary-500" />
|
|||
|
|
<span>Игровой Марафон</span>
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<nav className="flex items-center gap-4">
|
|||
|
|
{isAuthenticated ? (
|
|||
|
|
<>
|
|||
|
|
<Link
|
|||
|
|
to="/marathons"
|
|||
|
|
className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
|
|||
|
|
>
|
|||
|
|
<Trophy className="w-5 h-5" />
|
|||
|
|
<span>Марафоны</span>
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-3 ml-4 pl-4 border-l border-gray-700">
|
|||
|
|
<div className="flex items-center gap-2 text-gray-300">
|
|||
|
|
<User className="w-5 h-5" />
|
|||
|
|
<span>{user?.nickname}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={handleLogout}
|
|||
|
|
className="p-2 text-gray-400 hover:text-white transition-colors"
|
|||
|
|
title="Выйти"
|
|||
|
|
>
|
|||
|
|
<LogOut className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<Link to="/login" className="text-gray-300 hover:text-white transition-colors">
|
|||
|
|
Войти
|
|||
|
|
</Link>
|
|||
|
|
<Link to="/register" className="btn btn-primary">
|
|||
|
|
Регистрация
|
|||
|
|
</Link>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
{/* Main content */}
|
|||
|
|
<main className="flex-1 container mx-auto px-4 py-8">
|
|||
|
|
<Outlet />
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<footer className="bg-gray-800 border-t border-gray-700 py-4">
|
|||
|
|
<div className="container mx-auto px-4 text-center text-gray-500 text-sm">
|
|||
|
|
Игровой Марафон © {new Date().getFullYear()}
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|