PNSPS-frontend-MaterialUI/src/components/cards/AuthFooter.js

// material-ui
import { useMediaQuery, Container, Link, Typography, Stack } from '@mui/material';
import bhkLogo from 'assets/images/BHK_logo_rgb_zh-hk.png';
import {FormattedMessage} from "react-intl";
import {useIntl} from "react-intl";
import { 
  isGLDLoggedIn, 
} from "utils/Utils";
// ==============================|| FOOTER - AUTHENTICATION ||============================== //

const AuthFooter = () => {
  const matchDownSM = useMediaQuery((theme) => theme.breakpoints.down('sm'));
  const intl = useIntl();

  const bhkAlt = intl.formatMessage({ id: "bhkLogoAlt" });
  const wcagAlt = intl.formatMessage({ id: "wcagAaAlt" });

  return (
    <Container maxWidth="xl" sx={{ minHeight: '5vh' }}>

      <Stack
        direction={matchDownSM ? 'column' : 'row'}
        justifyContent={matchDownSM ? 'center' : 'flex-start'}
        spacing={2}
        textAlign={matchDownSM ? 'center' : 'inherit'}
        alignItems="center"
      >
        <Typography
          variant="subtitle2"
          component="span"
          sx={{ color: '#4A4A4A' }}
        >
          2024-{new Date().getFullYear()} &copy; <FormattedMessage id="HKGLD" />
        </Typography>
        <Typography
            variant="subtitle2"
            color="secondary"
            component={Link}
            href="/importantNotice"
            target="_blank"
            underline="hover"
          >
            <FormattedMessage id="importantNotice" />
          </Typography>
          <Typography
            variant="subtitle2"
            color="secondary"
            component={Link}
            href="/privacyPolicy"
            target="_blank"
            underline="hover"
          >
            <FormattedMessage id="privacyPolicy" />
          </Typography>
      </Stack>  
        <Stack direction={matchDownSM ? 'column' : 'row'} spacing={matchDownSM ? 1 : 3} textAlign={matchDownSM ? 'center' : 'inherit'} justifyContent={matchDownSM?"center":"flex-end"}>
          {!isGLDLoggedIn()? (
          <a
            href="https://www.w3.org/WAI/WCAG2AA-Conformance"
            title="Explanation of WCAG 2 Level AA conformance"
          >
            <img
              height="32"
              width="88"
              src="https://www.w3.org/WAI/wcag2AA"
              alt={wcagAlt}
            />
          </a>
        ) : null}

        <a href="https://www.brandhk.gov.hk/zh-hk" title="Brand Hong Kong">
          <img
            src={bhkLogo}
            alt={bhkAlt}
            height="32"
            width="88"
          />
        </a>
      </Stack>
    </Container>
  );
};

export default AuthFooter;