// ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Button from '@mui/material/Button' import Typography from '@mui/material/Typography' import CardContent from '@mui/material/CardContent' import Grid, { GridProps } from '@mui/material/Grid' import { styled, useTheme } from '@mui/material/styles' // Styled Grid component const StyledGrid = styled(Grid)(({ theme }) => ({ [theme.breakpoints.down('sm')]: { order: -1, display: 'flex', justifyContent: 'center' } })) // Styled component for the image const Img = styled('img')(({ theme }) => ({ right: 0, bottom: 0, width: 298, position: 'absolute', [theme.breakpoints.down('sm')]: { width: 250, position: 'static' } })) const AnalyticsCongratulations = () => { // ** Hook const theme = useTheme() return ( `${theme.spacing(6.75, 7.5)} !important` }}> Congratulations{' '} John ! 🎉 You have done{' '} 68% {' '} 😎 more sales today. Check your new badge in your profile. Congratulations John ) } export default AnalyticsCongratulations