amber/src/components/Header/Header.jsx

import React from 'react';
import { createStyles, styled } from '@mui/material/styles';
import { Box, Typography, Link } from '@mui/material';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import PinterestIcon from '@mui/icons-material/Pinterest';

const Container = styled(Box)(({theme})=>({
    backgroundColor: theme.palette.primary.main,
    paddingTop: 10,
    paddingBottom: 10,
    width: "100%",
    display:"flex",
    position:"relative",
    minHeight:"fit-content",
    [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
        display: "none"
    },
}))

const headerStyle = createStyles({
    icon:{
        fontSize:17
    }
})


const Header = () => {

    return (
        <Container>
            <Box sx={{color:"white", px:23}}>
                <Box sx={{display:"flex", gap:1}}>
                    <InstagramIcon style={headerStyle.icon} />
                    <FacebookIcon style={headerStyle.icon} />
                    <TwitterIcon style={headerStyle.icon} />
                    <PinterestIcon style={headerStyle.icon} />
                </Box>
                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <Link sx={{color:"white", textDecoration:"underline"}}> here</Link> to subcribe now.</Typography>
            </Box>
        </Container>
    );
};

export default Header;