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);
    };

    //console.log(router.asPath);
    const shareBodyStr = t("common:gov-wales-link") + router.asPath;
    const shareSubjectStr =
        t("common:social-shared-from") +
        " " +
        t("common:gov-wales-label").toLowerCase();

    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=" +
                                            shareBodyStr
                                        }
                                        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=" +
                                            shareBodyStr
                                        }
                                        className="facebook"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        Facebook
                                    </a>
                                </li>
                                <li>
                                    <a
                                        href={
                                            "mailto:?body=" +
                                            shareBodyStr +
                                            "&subject=" +
                                            shareSubjectStr
                                        } //</li>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="https://gov.wales/contact-us"
                                            className="govuk-footer__link"
                                            id="aAccess"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            Contact us
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="https://gov.wales/copyright-statement"
                                            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="https://gov.wales/copyright-statement"
                                            className="govuk-footer__link"
                                            id="aAccess"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t("common:footer-copyright-link")}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href="https://gov.wales/help/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="https://gov.wales/website-privacy-policy"
                                            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://gov.wales/terms-and-conditions"
                                            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://gov.wales/alternative-languages"
                                            id="aTermsConds"
                                            className="govuk-footer__link"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            {t(
                                                "common:footer-alternative-languages-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>
        </>
    );
}