51 lines
2.2 KiB
JavaScript
51 lines
2.2 KiB
JavaScript
import { Link, useLocation } from 'react-router-dom'
|
|
import './Header.css'
|
|
|
|
export default function Header() {
|
|
const location = useLocation()
|
|
|
|
return (
|
|
<header className="header">
|
|
<div className="header-inner">
|
|
<div className="header-left">
|
|
<Link to="/" className="logo">КИОН</Link>
|
|
<nav className="nav">
|
|
<span className="nav-item stub">Главная</span>
|
|
<span className="nav-item stub">Телеканалы</span>
|
|
<span className="nav-item stub">Фильмы</span>
|
|
<span className="nav-item stub">Сериалы</span>
|
|
<Link to="/games" className={`nav-item nav-games${location.pathname === '/games' ? ' active' : ''}`}>Игры</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="header-right">
|
|
<button className="icon-btn" aria-label="Фильтры">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<line x1="4" y1="6" x2="20" y2="6"/>
|
|
<line x1="8" y1="12" x2="16" y2="12"/>
|
|
<line x1="11" y1="18" x2="13" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
<button className="icon-btn" aria-label="Поиск">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
</button>
|
|
<button className="promo-btn stub">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<polyline points="20 12 20 22 4 22 4 12"/>
|
|
<rect x="2" y="7" width="20" height="5"/>
|
|
<line x1="12" y1="22" x2="12" y2="7"/>
|
|
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/>
|
|
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
|
|
</svg>
|
|
Промокод
|
|
</button>
|
|
<div className="degi-pill stub">Деги</div>
|
|
<button className="login-btn stub">Войти</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|