header.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import image from '../images/card.png';
  2. import logo from '../images/musicico.png';
  3. import logoutimg from '../images/logout.png';
  4. import {connect} from 'react-redux';
  5. import { actionAuthLogout } from '../store/authReducer';
  6. export const Header = ({children}) =>
  7. <header id="header">
  8. <nav className="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
  9. <div className="container flex justify-content-between ">
  10. <div className='d-flex align-items-center justify-content-center' >
  11. <a href="/allplaylists" className="navbar-brand" ><img className='logo' src={logo} alt='logo'/>Music</a>
  12. </div>
  13. <div className="d-flex">
  14. <div className="d-flex align-items-center" id="navbarSupportedContent">
  15. <a href="/allplaylists" className="navbar-brand nav-link active" aria-current="page" >To all playlists</a>
  16. </div>
  17. <div className="d-flex align-items-center" id="navbarSupportedContent">
  18. <a href="/user" className="navbar-brand nav-link active" aria-current="page" >Home</a>
  19. </div>
  20. <input className="form-control me-2 " type="search" placeholder="Search" aria-label="Search"/>
  21. </div>
  22. <div className="d-flex">
  23. <img alt='///' className='logoimg' src={image}/>
  24. <CLogout/>
  25. </div>
  26. </div>
  27. </nav>
  28. {children}
  29. </header>
  30. const CLogout = connect(state => ({children: `Logout (${state.auth.user?.login || 'anon'})`}),
  31. {onClick: actionAuthLogout})('button')