PNSPS-frontend-MaterialUI/src/pages/iAmSmart/FailCallback/index.js

// material-ui
import {
    Grid,
    Typography,
    Button
} from '@mui/material';
import * as React from "react";
import { useNavigate } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {

    const navigate = useNavigate()
    const [onReady, setOnReady] = React.useState(false);

    React.useEffect(() => {
        setOnReady(true);
    }, []);

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
      
                <Grid container sx={{ height: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                    <Grid item xs={12} md={12} >
                        <Grid container justifyContent="flex-start" alignItems="center" >
                            <center>
                                <Grid item xs={12} md={12} >

                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                        登入失敗，請重試。
                                    </Typography>
                                    <Button
                                        component="span"
                                        variant="contained"
                                        size="large"
                                        sx={{ m: 4 }}
                                        onClick={() => {
                                            navigate("/login");
                                        }}
                                    >返回登入</Button>

                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >

    );
};

export default Index;