123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import styled from "styled-components";
- import { toast } from "react-toastify";
- import Modal from "../../ui/Modal";
- const StyledUrl = styled.div`
- background-color: var(--color-midGrey);
- padding: 0.5em;
- border-radius: 2px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 2em;
- & span {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- & img {
- margin-left: 1em;
- cursor: pointer;
- }
- `;
- const InviteModal = ({ show, setShow, welcome = true }) => {
- const { t } = useTranslation();
- const currentUrl = window.location.href;
- const handleCopy = async () => {
- await navigator.clipboard.writeText(window.location.href);
- toast.info(t("Url copied to clipboard!"), { autoClose: 1000 });
- };
- return (
- <Modal
- title={welcome ? t("Ready to play ?") : t("Invite more player")}
- setShow={setShow}
- show={show}
- >
- <header>
- <h3>{t("Share this link with your friends")}</h3>
- </header>
- <section>
- <StyledUrl>
- <span>{currentUrl}</span>
- <img
- className="copy"
- src="https://icongr.am/entypo/copy.svg?size=22&color=888886"
- alt={t("Copy")}
- onClick={handleCopy}
- />
- </StyledUrl>
- <p>
- {t(
- "Share this link with your friends and start playing immediately."
- )}
- </p>
- {welcome && (
- <button
- onClick={() => {
- setShow(false);
- }}
- className="button success"
- style={{ margin: "1em auto" }}
- >
- {t("Let's go...")}
- </button>
- )}
- </section>
- </Modal>
- );
- };
- export default InviteModal;
|