import { Box, Grid, Typography, Avatar, Button } from '@mui/material';
import theme from '../../theme/theme.js';
const Header = (props) => {
const styles = {
section: {
padding: theme.spacing(3.75),
mb: theme.spacing(2),
backgroundColor: theme.palette.grey[50]
},
avatar: {
mt: theme.spacing(1),
padding: theme.spacing(1.5),
backgroundColor: theme.palette.primary[500]
},
button: {
color: theme.palette.primary[500],
backgroundColor: theme.palette.common.white,
':hover': {
color: theme.palette.common.white,
backgroundColor: theme.palette.primary[500]
}
},
title: {
color: theme.palette.common.dark
},
subtitle: {
color: theme.palette.grey[500]
},
img: {
display: 'block'
}
}
const content = {
'Image1-1': 'mui-artemis-assets/headers/dashboard.svg',
'Typography1-1': 'Analytics Dashboard',
'Typography1-2': 'Monitor key metrics, check reporting and review insights',
'Image1-2': 'mui-artemis-assets/headers/download.svg',
'Typography1-3': 'Download',
'Image1-3': 'mui-artemis-assets/headers/settings.svg',
'Typography1-4': 'Settings',
'Image1-4': 'mui-artemis-assets/headers/doc.svg',
'Typography1-5': 'Download Report',
...props.content
}
return (
<Box component="section" sx={styles.section}>
<Grid container alignItems="center" rowSpacing={4}>
<Grid item xs={12} md={6}>
<Grid container rowSpacing={2} columnSpacing={2}>
<Grid item>
<Avatar variant="rounded" sx={styles.avatar} src={content['Image1-1']} alt=""/>
</Grid>
<Grid item xs>
<Typography variant="h4" sx={styles.title}>{content['Typography1-1']}</Typography>
<Typography variant="subtitle1" sx={styles.subtitle}>{content['Typography1-2']}</Typography>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6}>
<Grid container rowSpacing={1} columnSpacing={1.5} justifyContent="end">
<Grid item xs={12} md="auto">
<Button variant="contained" sx={styles.button} fullWidth disableElevation>
<Grid container alignItems="center" justifyContent="center" columnSpacing={0.75}>
<Grid item>
<Box component="img" sx={styles.img} src={content['Image1-2']} alt=""/>
</Grid>
<Grid item>
<Typography variant="button">{content['Typography1-3']}</Typography>
</Grid>
</Grid>
</Button>
</Grid>
<Grid item xs={12} md="auto">
<Button variant="contained" sx={styles.button} fullWidth disableElevation>
<Grid container alignItems="center" justifyContent="center" columnSpacing={0.75}>
<Grid item>
<Box component="img" sx={styles.img} src={content['Image1-3']} alt=""/>
</Grid>
<Grid item>
<Typography variant="button">{content['Typography1-4']}</Typography>
</Grid>
</Grid>
</Button>
</Grid>
<Grid item xs={12} md="auto">
<Button variant="contained" sx={styles.button} fullWidth disableElevation>
<Grid container alignItems="center" justifyContent="center" columnSpacing={0.75}>
<Grid item>
<Box component="img" sx={styles.img} src={content['Image1-4']} alt=""/>
</Grid>
<Grid item>
<Typography variant="button">{content['Typography1-5']}</Typography>
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
)
}
export default Header;