andil/THE-TIP-TOP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Emma781227
2026-06-26 11:26:45 +02:00
parent 1cf2a24ede
commit 2d25c91c55
14 changed files with 540 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/components/Header.jsx
View File

@@ -1,21 +1,36 @@
import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import logo from '../assets/img/logo.png'
export default function Header() {
const [menuOpen, setMenuOpen] = useState(false)
const { pathname } = useLocation()
const navigate = useNavigate()
const user = JSON.parse(localStorage.getItem('user') || 'null')
const isLoggedIn = !!user
const handleLogout = () => {
localStorage.removeItem('token')
localStorage.removeItem('user')
setMenuOpen(false)
navigate('/connexion')
}
const navLinks = [
{ to: '/accueil', label: 'Accueil' },
{ to: '/regles-jeu', label: 'Règles du jeu' },
]
const initials = user
? `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
: null
return (
<header className="bg-white shadow-sm relative z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
<Link to="/accueil" className="flex items-center flex-shrink-0">
<Link to={isLoggedIn ? '/mes-gains' : '/accueil'} className="flex items-center flex-shrink-0">
<img src={logo} alt="Thé Tip Top" className="h-10 sm:h-12 w-auto" />
</Link>
@@ -32,14 +47,32 @@ export default function Header() {
{link.label}
</Link>
))}
<div className="flex items-center gap-2">
<Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
Connexion
</Link>
<Link to="/inscription" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
Inscription
</Link>
</div>
{isLoggedIn ? (
<div className="flex items-center gap-3">
<Link to="/mes-gains" className="flex items-center gap-2 text-sm text-gray-700 hover:text-green-700 font-medium transition-colors">
<div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold">
{initials}
</div>
<span>{user.firstname}</span>
</Link>
<button
onClick={handleLogout}
className="text-sm text-gray-400 hover:text-red-500 transition-colors font-medium"
>
Déconnexion
</button>
</div>
) : (
<div className="flex items-center gap-2">
<Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
Connexion
</Link>
<Link to="/inscription" className="border border-green-700 text-green-700 px-4 py-2 rounded-lg hover:bg-green-50 transition-colors text-sm">
Inscription
</Link>
</div>
)}
</nav>
{/* Hamburger mobile */}
@@ -69,21 +102,42 @@ export default function Header() {
{link.label}
</Link>
))}
<div className="flex flex-col gap-2 pt-3">
<Link
to="/connexion"
onClick={() => setMenuOpen(false)}
className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
>
Connexion
</Link>
<Link
to="/inscription"
onClick={() => setMenuOpen(false)}
className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
>
Inscription
</Link>
{isLoggedIn ? (
<>
<Link
to="/mes-gains"
onClick={() => setMenuOpen(false)}
className="w-full text-center bg-[#006B6B] text-white px-4 py-2.5 rounded-lg text-sm font-medium"
>
Mon espace ({user.firstname})
</Link>
<button
onClick={handleLogout}
className="w-full text-center border border-red-300 text-red-500 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors"
>
Déconnexion
</button>
</>
) : (
<>
<Link
to="/connexion"
onClick={() => setMenuOpen(false)}
className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
>
Connexion
</Link>
<Link
to="/inscription"
onClick={() => setMenuOpen(false)}
className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
>
Inscription
</Link>
</>
)}
</div>
</div>
)}