Social Share

ShareLinks.tsx

import { Fragment } from "react";
import { useRouter } from "next/router";

function ShareLinks({
  rootDomain,
  title,
  platforms = ["facebook", "twitter"],
}: {
  rootDomain: string;
  title: string;
  platforms?: Array<"facebook" | "twitter">;
}) {
  const router = useRouter();
  const BASE_URL = rootDomain + router.asPath;
  const BASE_TITLE = title;

  function handleClick(e, p) {
    e.preventDefault();
    let window_size = "width=585,height=511";
    const url = e.target.href;
    switch (p) {
      case "facebook":
        window_size = "width=585,height=368";
        break;
      case "twitter":
        window_size = "width=585,height=261";
        break;
      default:
        window_size = "width=517,height=511";
        break;
    }
    window.open(
      url,
      "",
      "menubar=no,toolbar=no,resizable=yes,scrollbars=yes," + window_size
    );
    return false;
  }

  return (
    <div className="social-links t-h4">
      <span>SHARE:&nbsp;</span>
      {platforms.map((p, idx) => {
        if (p === "facebook") {
          return (
            <Fragment key={p}>
              <a
                className={"t-h4"}
                key={p}
                href={`https://www.facebook.com/sharer/sharer.php?u=${BASE_URL}&t=${BASE_TITLE}`}
                target="_blank"
                rel="noopener"
                title="Share on Facebook"
                onClick={(e) => handleClick(e, p)}
              >
                FACEBOOK
              </a>
              {idx !== platforms.length - 1 ? <span>,</span> : null}
            </Fragment>
          );
        }

        if (p === "twitter") {
          return (
            <Fragment key={p}>
              <a
                className={"t-h4"}
                key={p}
                href={`https://www.twitter.com/intent/tweet?url=${BASE_URL}&via=luakabop&text=${BASE_TITLE}`}
                target="_blank"
                rel="noopener"
                title="Share on Twitter"
                onClick={(e) => handleClick(e, p)}
              >
                TWITTER
              </a>
              {idx !== platforms.length - 1 ? <span>,</span> : null}
            </Fragment>
          );
        }
      })}
    </div>
  );
}

export default ShareLinks;