import React from
'react'
;
import { makeStyles } from
'@material-ui/core/styles'
;
import {
AppBar,
Toolbar,
Typography,
IconButton,
Paper,
Fab,
List,
ListItem,
ListItemText} from
'@material-ui/core'
;
import MenuIcon from
'@material-ui/icons/Menu'
;
import AddIcon from
'@material-ui/icons/Add'
;
const messages = [
{
id: 1,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 2,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 3,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 4,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 5,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 6,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 7,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
},
{
id: 8,
primary:
'Welcome To GeeksForGeeks'
,
secondary:
"A Computer Science Portal For Geeks"
,
}
];
const useStyles = makeStyles((theme) => ({
text: {
padding: theme.spacing(2, 2, 0),
},
paper: {
paddingBottom: 50,
},
list: {
marginBottom: theme.spacing(2),
},
appBar: {
top:
'auto'
,
bottom: 0,
},
fabButton: {
position:
'absolute'
,
zIndex: 1,
top: -30,
left: 0,
right: 0,
margin:
'0 auto'
,
},
}));
export
default
function
BottomAppBar() {
const classes = useStyles();
return
(
<React.Fragment>
<Paper square className={classes.paper}>
<Typography className={classes.text}
variant=
"h5"
gutterBottom>
List
</Typography>
<List className={classes.list}>
{messages.map(({ id, primary,
secondary, person }) => (
<React.Fragment key={id}>
<ListItem button>
<ListItemText primary={primary}
secondary={secondary} />
</ListItem>
</React.Fragment>
))}
</List>
</Paper>
<AppBar position=
"fixed"
color=
"primary"
className={classes.appBar}>
<Toolbar>
<IconButton edge=
"start"
color=
"inherit"
aria-label=
"open drawer"
>
<MenuIcon />
</IconButton>
<Fab color=
"secondary"
aria-label=
"add"
className={classes.fabButton}>
<AddIcon />
</Fab>
</Toolbar>
</AppBar>
</React.Fragment>
);
}