Function Header

Yet Another LinkedIn Clone/Header.js:16–45

()

// import { LinkedIn } from "@material-ui/icons";

const Header = () => {
	const dispatch = useDispatch();

	const logoutHandler = async () => {
		await auth.signOut();
		dispatch(logout());
	};

	return (
		<div className="header">
			<div className="header__left">
				<img src={logo} alt="Linkedin Logo" />

				<div className="header__search">
					<SearchIcon />
					<input type="text" placeholder="Search" />
				</div>
			</div>

			<div className="header__right">
				<HeaderOption Icon={HomeIcon} title="Home" />
				<HeaderOption Icon={SupervisorAccountIcon} title="My Network" />
				<HeaderOption Icon={BusinessCenterIcon} title="Jobs" />
				<HeaderOption Icon={ChatIcon} title="Messaging" />
				<HeaderOption Icon={NotificationsIcon} title="Notifications" />
				<HeaderOption title="Me" onClick={logoutHandler} avatar={true} />
			</div>
		</div>
	);
};

export default Header;