/* eslint-disable no-unused-vars */ import React from 'react' import {makeStyles} from "@material-ui/core/styles" import {Alert, AlertTitle} from "@material-ui/lab" import Collapse from "@material-ui/core/Collapse" import CloseIcon from "@material-ui/icons/Close" import { IconButton } from '@material-ui/core' const useStyles = makeStyles((theme)=>({ root : { marginBottom : "10px", textAlign : "center", margin: "0 auto", width : "40%", minWidth : "400px", transition : "width 0.5s", '& > * + *' : { marginTop : theme.spacing(2) }, '&:hover' : { width : "100%", } }, inform : { textAlign : "center", margin : "10px" } })) function Notification() { const [open, setOpen] = React.useState(true); const classes = useStyles(); return ( <div className={classes.root}> <Collapse in={open}> <Alert severity="info" action={ <IconButton aria-label="close" size="small" onClick={()=>{ setOpen(false); }}> <CloseIcon fontSize="inherit"/> </IconButton> }> <AlertTitle>Price Drop</AlertTitle> <p className={classes.inform}>All Courses At <strong> 399 </strong>/-</p> </Alert> </Collapse> </div> ) } export default Notification