/* eslint-disable no-unused-vars */ // created by Rahul Beniwal. This is header component import React from 'react' import { FormControl, TextField, withStyles, Button, IconButton } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { ShoppingCart } from '@material-ui/icons'; import CategoryIcon from '@material-ui/icons/Category'; import Notification from './Notification'; import styles from "./Header.module.css"; import {Link} from 'react-router-dom'; const useStyle = makeStyles((theme) => ({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, border: 0, color: 'white', height: 30, padding: '0 10px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', margin: '10px' }, defaultHeader: { display: "flex", flexDirection: "row", justifyContent: "space-around", alignItems: "center", borderRadius : "10px", backgroundImage: "linear-gradient(to left, #1f3a64, #00678c, #0094a5, #57c1b0, #a8ebb6)", marginBottom : "10px", transition : "border 0.5s", marginTop : "10px", transitionTimingFunction : "ease-out", "&:hover" : { zIndex : "1", border : "10px solid white", } }, linkStyle: { textDecoration: "none" }, label: { textTransform: 'capitalize', }, })); function Header() { const classes = useStyle(); return ( <div className={styles.header}> <div><Notification/></div> <div className={classes.defaultHeader}> <IconButton> <div className={styles.logo}><img className={styles.logoImage} src={require("../../data/logoUnfinished.jpg").default} alt="logo"/></div> </IconButton> <Button className={classes.linkStyle}><CategoryIcon /></Button> <form noValidate autoComplete="off"> <TextField id="standard-basic" label="Search Courses" variant="filled" /> </form> <Button> <ShoppingCart /> </Button> <div className={styles.signupOptions}> <Link to="login"> <Button variant="contained" color="primary" className={classes.root}>Login</Button> </Link> <Link to="signup"> <Button variant="contained" color="primary" className={classes.root}>Signup</Button> </Link> </div> </div> </div> ) } export default Header