pedwfrontend/components/footer.js

import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState } from "react";

export default function Footer(props) {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    var linksArr = props.footerLinks || [{}];

    const linksBlock = Object.keys(linksArr).map((key) => (
        <li className="govuk-footer__inline-list-item" key={key}>
            <Link href={linksArr[key].path || "/"}>
                <a className="govuk-footer__link">{linksArr[key].title}</a>
            </Link>
        </li>
    ));

    const [showShareState, setShowShareState] = useState(false);

    let shareState = () => {
        showShareState == true
            ? setShowShareState(false)
            : setShowShareState(true);
    };

    return (
        <>
            <div className="sharebar" id="sharebar">
                <div className="sharebar__components container-fluid">
                    <div className="main__sharebar">
                        <div
                            className={
                                showShareState
                                    ? "block-share active"
                                    : "block-share"
                            }
                        >
                            <button
                                id="sharePage"
                                aria-controls="sharePageLinks"
                                aria-expanded="true"
                                onClick={() => {
                                    shareState();
                                }}
                            >
                                {t("common:social-bar-share-link")}
                            </button>
                            <ul
                                className={
                                    showShareState
                                        ? "block-share active"
                                        : "block-share"
                                }
                                id="sharePageLinks"
                                aria-labelledby="sharePage"
                            >
                                <li>
                                    <a
                                        href="https://twitter.com/intent/tweet?url=https%3A//gov.wales/"
                                        className="twitter"
                                    >
                                        <span className="vo_hidden">
                                            {t(
                                                "common:social-bar-share-via-link"
                                            )}{" "}
                                        </span>
                                        Twitter
                                    </a>
                                </li>
                                <li>
                                    <a
                                        href="https://www.facebook.com/sharer/sharer.php?u=https%3A//gov.wales/"
                                        className="facebook"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        Facebook
                                    </a>
                                </li>
                                <li>
                                    <a
                                        href="mailto:?body=https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
                                        className="email"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        Email
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div
                            id="sharebar__backtotop"
                            className="btn--outlined btn--arrow-up"
                        >
                            <a href="#page_wrapper">
                                {t("common:back-to-top-link")}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <footer className="govuk-footer " role="contentinfo">
                <div className="govuk-width-container ">
                    <div className="govuk-footer__meta">
                        <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
                            <h2 className="govuk-visually-hidden">
                                Support links
                            </h2>
                            <nav
                                role="navigation"
                                aria-labelledby="footer_links"
                            >
                                <ul
                                    className="govuk-footer__inline-list"
                                    id="footer_links"
                                >
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
                                            id="aTermsConds"
                                            className="govuk-footer__link"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t(
                                                "common:footer-terms-conditions-link"
                                            )}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="https://www.gov.uk/government/publications/planning-inspectorate-privacy-notices"
                                            id="aPrivacy"
                                            className="govuk-footer__link"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t("common:footer-privacy-link")}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="https://www.gov.uk/guidance/appeals-casework-portal-privacy-cookies"
                                            id="aCookies"
                                            className="govuk-footer__link"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t("common:footer-cookies-link")}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
                                            className="govuk-footer__link"
                                            id="aAccess"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t(
                                                "common:footer-accessibility-link"
                                            )}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="http://www.gov.uk/guidance/feedback"
                                            id="feedback"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t("common:footer-feedback-link")}
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <div
                                className="footer_logo container-fluid"
                                id="footer_logo"
                            >
                                <a
                                    href="https://gov.wales/"
                                    className="footer__logo"
                                    id="footerlogo"
                                >
                                    <span className="visually-hidden">
                                        Home
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </>
    );
}