import dynamic from "next/dynamic";
import ExternalLink from "./externalLink";

const ShareButtons = dynamic(() => import("./shareButtons"));

export default function Footer() {
  return (
    <>
      <style jsx={true}>{`
        .footer_row {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          color: #ffffff;
          font-size: 10pt;
          background-color: #df696e;
        }

        .footer_item {
          display: flex;
          flex-direction: row;
          flex-grow: 1;
          padding: 8px;
          align-items: center;
          filter: grayscale(50%);
        }

        .footer_item > a {
          color: #ffffff;
        }

        .footer_right {
          flex-direction: row-reverse;
        }

        .share_text {
          margin-right: 10px;
        }

        .tenor_logo {
          height: 12px;
        }
      `}</style>
      <div className="footer_row">
        <div className="footer_item">
          <div className="share_text">Share the ❤️</div>
          <ShareButtons />
        </div>
        <div className="footer_item footer_right">
          <ExternalLink href="https://tenor.com/">
            Powered by{" "}
            <img className="tenor_logo" src="/tenor.svg" alt="Logo for Tenor" />
          </ExternalLink>
        </div>
      </div>
    </>
  );
}

import dynamic from "next/dynamic";
import ExternalLink from "./externalLink";
import ShareButtons from "./shareButtons";

export default function Footer() {
  return (
    <>
      <style jsx={true}>{`
        .footer_row {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          color: #ffffff;
          font-size: 10pt;
          background-color: #df696e;
        }

        .footer_item {
          display: flex;
          flex-direction: row;
          flex-grow: 1;
          padding: 8px;
          align-items: center;
          filter: grayscale(50%);
        }

        .footer_item > a {
          color: #ffffff;
        }

        .footer_right {
          flex-direction: row-reverse;
        }

        .share_text {
          margin-right: 10px;
        }

        .tenor_logo {
          height: 12px;
        }
      `}</style>
      <div className="footer_row">
        <div className="footer_item">
          <div className="share_text">Share the ❤️</div>
          <ShareButtons />
        </div>
        <div className="footer_item footer_right">
          <ExternalLink href="https://tenor.com/">
            Powered by{" "}
            <img className="tenor_logo" src="/tenor.svg" alt="Logo for Tenor" />
          </ExternalLink>
        </div>
      </div>
    </>
  );
}

Remove delay load share buttons
Remove delay load share buttons

Big issues were coming up with this - I may need to remove the library completely
