LinkShare.tsx

gistfile1.txt

"use client";
import {
  Box,
  Button,
  Link,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  useClipboard,
  useDisclosure,
} from "@chakra-ui/react";
import { FaLink } from "react-icons/fa";
import { TbShare2 } from "react-icons/tb";

import {
  RiFacebookCircleFill,
  RiInstagramFill,
  RiLinkedinFill,
  RiTelegramFill,
  RiTwitterFill,
  RiWhatsappFill,
} from "react-icons/ri";
import { useEffect, useState } from "react";

const ICONS = [
  {
    name: "Facebook",
    icon: <RiFacebookCircleFill />,
    url: "https://www.facebook.com/sharer/sharer.php?u=",
    color: "#3b5998",
  },
  {
    name: "Instagram",
    icon: <RiInstagramFill />,
    url: "https://www.instagram.com/sharer/sharer.php?u=",
    color: "#e1306c",
  },
  {
    name: "Twitter",
    icon: <RiTwitterFill />,
    url: "https://twitter.com/intent/tweet?url=",
    color: "#1da1f2",
  },
  {
    name: "Linkedin",
    icon: <RiLinkedinFill />,
    url: "https://www.linkedin.com/shareArticle?mini=true&url=",
    color: "#0077b5",
  },
  {
    name: "Whatsapp",
    icon: <RiWhatsappFill />,
    url: "https://api.whatsapp.com/send?text=",
    color: "#25d366",
  },
  {
    name: "Telegram",
    icon: <RiTelegramFill />,
    url: "https://telegram.me/share/url?url=",
    color: "#0088cc",
  },
];

const LinkShare = () => {
  const pageLink: string =
    (typeof window !== "undefined" && window.location.href) || "";
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [hasAlertBeenShown, setHasAlertBeenShown] = useState(false);

  const { hasCopied, onCopy } = useClipboard(pageLink);

  useEffect(() => {
    const handleScroll = () => {
      if (!hasAlertBeenShown) {
        // Check if the user is near the bottom of the page
        const isNearBottom =
          window.innerHeight + window.scrollY >=
          document.body.offsetHeight - 300;

        // If near the bottom, call onOpen function and set hasAlertBeenShown to true
        if (isNearBottom) {
          onOpen();
          setHasAlertBeenShown(true);
        }
      }
    };

    // Attach the scroll event listener when the component mounts
    window.addEventListener("scroll", handleScroll);

    // Cleanup the event listener when the component unmounts
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [hasAlertBeenShown]); // Include hasAlertBeenShown in the dependency array

  return (
    <>
      <Button
        zIndex={100}
        leftIcon={<TbShare2 fontSize={"17px"} />}
        onClick={onOpen}
        colorScheme="blue"
        size="sm"
        variant="outline"
        borderRadius="full"
        px={4}
        h={8}
        fontSize="sm"
        fontWeight="500"
        _hover={{ bg: "gray.100", color: "gray.900" }}
        _active={{
          bg: "gray.200",
          transform: "scale(0.98)",
          borderColor: "gray.200",
        }}
        position={"fixed"}
        bottom={"1rem"}
        right={"1rem"}
      >
        Share
      </Button>

      <Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Social Share</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text fontWeight="500" mb="1rem">
              Share the link via
            </Text>
            <Box display={"flex"} flexDir={"row"}>
              {ICONS.map((icon) => (
                <Link
                  key={icon.name}
                  color={icon.color}
                  mr={2}
                  mb={2}
                  href={icon.url + pageLink}
                  target="_blank"
                  border="1px solid"
                  borderColor={"gray.200"}
                  _hover={{
                    borderColor: icon.color,
                  }}
                  rounded="lg"
                  fontSize={"2xl"}
                  p={2}
                >
                  {icon.icon}
                </Link>
              ))}
            </Box>
            <Text mb={1} fontSize={"sm"}>
              Copy Link
            </Text>
            <Text
              border="1px solid"
              borderColor="blue.500"
              rounded="lg"
              p={2}
              color="blue.600"
              onClick={onCopy}
            >
              <FaLink style={{ display: "inline" }} /> {pageLink}
            </Text>
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" w="full" onClick={onCopy}>
              {hasCopied ? "Copied" : "Copy"}
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default LinkShare;