header.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. import React from 'react';
  7. const REACT_VERSION = React.version;
  8. export const Header = ({children}) =>
  9. <header id="header">
  10. <nav className="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
  11. <div className="container flex justify-content-between ">
  12. <div className='d-flex align-items-center justify-content-center' >
  13. <a href="/allplaylists" className="navbar-brand" ><img className='logo' src={logo} alt='logo'/>Music</a>
  14. </div>
  15. <div className="d-flex">
  16. <div className="d-flex align-items-center" id="navbarSupportedContent">
  17. <a href="/allplaylists" className="navbar-brand nav-link active" aria-current="page" >To all playlists</a>
  18. </div>
  19. <div className="d-flex align-items-center" id="navbarSupportedContent">
  20. <a href="/user" className="navbar-brand nav-link active" aria-current="page" >Home</a>
  21. </div>
  22. <input className="form-control me-2 " type="search" placeholder="Search" aria-label="Search"/>
  23. </div>
  24. <CLogout/>
  25. </div>
  26. </nav>
  27. {children}
  28. </header>
  29. const ImgLogout = () => {
  30. return <img alt='///' className='logoimg' src={logoutimg}/>
  31. }
  32. const CLogout = connect(state => ({children: <ImgLogout/>}),
  33. {onClick: actionAuthLogout})('button')