Material-Ui Components

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;