LIONER-frontend/src/pages/extra-pages/ErrorPage.js

import {
    ButtonBase
} from '@mui/material'
import { useNavigate } from "react-router-dom";
import MainCard from 'components/MainCard';

//import errorImg from '@src/assets/images/pages/error.svg'

const ErrorPage = () => {
    let navigate = useNavigate();
    const handleToHomePage = () =>{
        let path = `/`;
        navigate(path);
    }

    return (
        <MainCard>
            <div>
                <a href='/'>
                    <h2>LIONER</h2>
                </a>
                <div >
                    <div >
                        <h2 >Page Not Found 🕵🏻‍♀️</h2>
                        <p >Oops! 😖 The requested URL was not found on this server.</p>
                        <ButtonBase
                            sx={{
                                p: 0.25,
                                bgcolor: 'red',
                                borderRadius: 30,
                                '&:hover': { bgcolor: 'secondary.lighter' }
                            }}
                            aria-label="Back to home"
                            aria-controls={open ? 'profile-grow' : undefined}
                            aria-haspopup="true"
                            onClick={handleToHomePage}>
                            Back to home
                        </ButtonBase>
                        {/*<img className='img-fluid' src={errorImg} alt='Not authorized page' />*/}
                    </div>
                </div>
            </div>
        </MainCard>
    )
}
export default ErrorPage;