PNSPS-frontend-MaterialUI/src/pages/extra-pages/UserMenuPub/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: '100%',
    height: '100%',
    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);

    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, orgEn, orgZh, orgCn, indEn, indZh, indCn }) => {

        return <>
            <tr>
                <td style={cellStyle}>{title}</td>
                <td style={cellStyle}><a href={locale=="zh-HK"?orgZh: locale=="en"?orgEn:orgCn} target='_brank'><DownloadIcon /></a></td>
                <td style={cellStyle}><a href={locale=="zh-HK"?indZh: locale=="en"?indEn:indCn} 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 justifyContent="center" alignItems="center" >
                    <Grid item xs={12}>
                        <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 item xs={10} md={8} lg={6}>
                        <div style={{
                            textAlign: "justify",
                            textJustify: "interWord",
                            fontStyle: "normal"
                        }}>

                            <p>
                                
                                <table style={tableStyle}>
                                    <tr>
                                        <th style={cellStyle} width="70%"> <FormattedMessage id="fileName" /></th>
                                        <th style={cellStyle} width="15%"> <FormattedMessage id="forOrgUser" /></th>
                                        <th style={cellStyle} width="15%"> <FormattedMessage id="forIndUser" /></th>
                                    </tr>

                                    {getRow({
                                        title: <FormattedMessage id="userGuide1" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/01 - Create account - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/01c - Create account - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/01sc - Create account - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/01 - Create account - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/01c - Create account - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/01sc - Create account - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide2" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/02 - Login - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/02c - Login - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/02sc - Login - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/02 - Login - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/02c - Login - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/02sc - Login - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide3" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/03 - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/03c - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/03sc - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/03 - Application for publishing a Public Notice in the Gazette - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/03c - Application for publishing a Public Notice in the Gazette - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/03sc - Application for publishing a Public Notice in the Gazette - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide4" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/04 - Proofreading reply (with correction) - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/04c - Proofreading reply (with correction) - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/04sc - Proofreading reply (with correction) - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/04 - Proofreading reply (with correction) - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/04c - Proofreading reply (with correction) - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/04sc - Proofreading reply (with correction) - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide5" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/05 - Proofreading reply (pass for printing) - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/05c - Proofreading reply (pass for printing) - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/05sc - Proofreading reply (pass for printing) - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/05 - Proofreading reply (pass for printing) - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/05c - Proofreading reply (pass for printing) - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/05sc - Proofreading reply (pass for printing) - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide6" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide7" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/07 - Forgot password - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/07c - Forgot password - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/07sc - Forgot password - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/07 - Forgot password - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/07c - Forgot password - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/07sc - Forgot password - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide8" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/08 - Change password - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/08c - Change password - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/08sc - Change password - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/08 - Change password - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/08c - Change password - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/08sc - Change password - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuide9" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/09 - Language of email notification - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/09c - Language of email notification - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/09sc - Language of email notification - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/09 - Language of email notification - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/09c - Language of email notification - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/09sc - Language of email notification - p 1.pdf"
                                    })}

                                    {getRow({
                                        title: <FormattedMessage id="userGuidePub10" />,
                                        orgEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/10 - Payment - c 1.pdf",
                                        orgZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/10c - Payment - c 1.pdf",
                                        orgCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/10sc - Payment - c 1.pdf",
                                        indEn: "https://pnsps.gld.gov.hk/user-guide-pub/eng/10 - Payment  - p 1.pdf",
                                        indZh: "https://pnsps.gld.gov.hk/user-guide-pub/cht/10c - Payment  - p 1.pdf",
                                        indCn: "https://pnsps.gld.gov.hk/user-guide-pub/chs/10sc - Payment  - p 1.pdf"
                                    })}

                                    
                                </table>
                                <FormattedMessage id="userGuidePubNote" />
                            </p>
                        </div>
                    </Grid>
                </Grid>
            )
    );

}

export default UserMenu;