PNSPS-frontend-MaterialUI/src/pages/extra-pages/UserMenu/index.js

import { Grid, Typography, Stack, } from '@mui/material';
import { useState, useEffect, lazy } from "react";

import Loadable from 'components/Loadable';
import { useIntl, FormattedMessage } from "react-intl";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: 'auto',
    height: 'auto',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));

import DownloadIcon from '@mui/icons-material/Download';

const UserMenu = () => {
    const intl = useIntl();
    const { locale } = intl;
    const [onReady, setOnReady] = useState(false);

    const pnspsurl = "https://"+window.location.hostname;

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

    const tableStyle = {
        fontFamily: "arial, sans-serif",
        borderCollapse: "collapse",
        width: "100%",
    }

    const cellStyle = {
        border: "1px solid #dddddd",
        textAlign: "left",
        padding: "8px"
    };

    const getRow = ({ title, en, zh, cn }) => {
        return <>
            <tr>
                <td style={cellStyle}>{title}</td>
                <td style={cellStyle}><a href={en} target='_brank'><DownloadIcon /></a></td>
                <td style={cellStyle}><a href={zh} target='_brank'><DownloadIcon /></a></td>
                <td style={cellStyle}><a href={cn} target='_brank'><DownloadIcon /></a></td>
            </tr>
        </>
            ;
    }


    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container sx={{ minHeight: '87vh', mb: 3}} direction="column" alignItems="center" >
                    <Grid item xs={12} md={12} width="100%">
                        <div style={BackgroundHead}>
                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
                                    <FormattedMessage id="userGuide" />
                                </Typography>
                            </Stack>
                        </div>
                    </Grid>
                    <Grid container justifyContent="center" alignItems="center" >
                    
                        <Grid item xs={10} md={8} lg={6}>
                            <div style={{
                                textAlign: "justify",
                                textJustify: "interWord",
                                fontStyle: "normal"
                            }}>

                                <p>
                                    <FormattedMessage id="userGuideDes" />
                                    <table style={tableStyle}>
                                        <tr>
                                            <th style={cellStyle} width="70%"></th>
                                            <th style={cellStyle} width="10%">English</th>
                                            <th style={cellStyle} width="10%">繁體中文</th>
                                            <th style={cellStyle} width="10%">简体中文</th>
                                        </tr>

                                        {getRow({
                                            title: <FormattedMessage id="userGuide1" />,
                                            en: pnspsurl + "/user-guide/eng/01 - Create account - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/01c - Create account - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/01sc - Create account - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide2" />,
                                            en: pnspsurl + "/user-guide/eng/02 - Login - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/02c - Login - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/02sc - Login - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide3" />,
                                            en: pnspsurl + "/user-guide/eng/03 - Application for publishing a Public Notice in the Gazette - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/03c - Application for publishing a Public Notice in the Gazette - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/03sc - Application for publishing a Public Notice in the Gazette - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide4" />,
                                            en: pnspsurl + "/user-guide/eng/04 - Proofreading reply (with correction) - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/04c - Proofreading reply (with correction) - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/04sc - Proofreading reply (with correction) - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide5" />,
                                            en: pnspsurl + "/user-guide/eng/05 - Proofreading reply (pass for printing) - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/05c - Proofreading reply (pass for printing) - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/05sc - Proofreading reply (pass for printing) - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide6" />,
                                            en: pnspsurl + "/user-guide/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide7" />,
                                            en: pnspsurl + "/user-guide/eng/07 - Forgot password - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/07c - Forgot password - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/07sc - Forgot password - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide8" />,
                                            en: pnspsurl + "/user-guide/eng/08 - Change password - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/08c - Change password - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/08sc - Change password - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide9" />,
                                            en: pnspsurl + "/user-guide/eng/09 - Language of email notification - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/09c - Language of email notification - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/09sc - Language of email notification - 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide10" />,
                                            en: pnspsurl + "/user-guide/eng/10 - Download General Demand Note for making payment(s) - 1.pdf",
                                            zh: pnspsurl + "/user-guide/cht/10c - Download General Demand Note for making payment(s) - 1.pdf",
                                            cn: pnspsurl + "/user-guide/chs/10sc - Download General Demand Note for making payment(s) - 1.pdf"
                                        })}


                                    </table>
                                </p>
                            </div>
                        </Grid>
                    </Grid>
                </Grid>
            )
    );

}

export default UserMenu;