任意の社会的なメディアに@ブログを共有するオプションを追加@ dsabyte.コム

import {
  IconButton,
  Icon,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  HStack,
} from "@chakra-ui/react";

import { FiShare2 } from "react-icons/fi";
import { FaLinkedin, FaTwitter, FaFacebook } from "react-icons/fa";
import { RiWhatsappFill } from "react-icons/ri";

const SocialIconLink = ({ url, as, color }) => (
  <a target="_blank" href={url}>
    <Icon color={color} w="30px" h="30px" as={as} />
  </a>
);

export default function SocialShare({ url }) {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <IconButton
        onClick={onOpen}
        aria-label="Search database"
        icon={<Icon as={FiShare2} />}
        variant="ghost"
      />

      <Modal isOpen={isOpen} onClose={onClose} pb="50px">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Share on social media</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <HStack justifyContent="center">
              <SocialIconLink
                as={FaFacebook}
                url={`https://www.facebook.com/sharer/sharer.php?u=${url}`}
                color="#1244a1"
              />
              <SocialIconLink
                as={FaLinkedin}
                url={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
                color="#002569"
              />
              <SocialIconLink
                as={FaTwitter}
                url={`https://twitter.com/intent/tweet?url=${url}`}
                color="#328dc2"
              />
              <SocialIconLink
                as={RiWhatsappFill}
                url={`https://api.whatsapp.com/send?text=${url}`}
                color="#42ba2d"
              />
            </HStack>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}