stream.graff.tech-client/src/components/SidebarTab5.tsx

/* eslint-disable no-irregular-whitespace */
import { Trans } from "react-i18next";
import useSidebarTabStore from "../stores/useSidebarStore";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import MailGradientIcon from "./icons/MailGradientIcon";
import PhoneGradientIcon from "./icons/PhoneGradientIcon";
import WebGradientIcon from "./icons/WebGradientIcon";
import { useCopyToClipboard } from "usehooks-ts";
import { Bounce, ToastContainer, toast } from "react-toastify";
import InfoIcon from "./icons/InfoBlueIcon";

function SidebarTab5() {
  const { setIsOpen, name, url } = useSidebarTabStore();
  const [, copyToClipboard] = useCopyToClipboard();

  function handleClickCopy() {
    copyToClipboard(url);
    toast.info("Ссылка скопирована в буфер обмена!", {
      icon: <InfoIcon />,
      position: "top-center",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: "light",
      transition: Bounce,
    });
  }

  return (
    <div className="sm:p-8 p-6 flex flex-col justify-between sm:gap-8 gap-6 min-h-full">
      <div>
        <div className="flex items-start justify-between">
          <p className="text-2xl font-semibold font-gilroy w-fit leading-snug">
            <span className="text-gradient">
              {name},{" "}
              <Trans i18nKey={"sidebar.title4_1"}>спасибо за запись</Trans>
            </span>
            <br />
            <Trans i18nKey={"sidebar.title4_2"}>
              на удаленную демонстрацию!
            </Trans>
          </p>
        </div>

        <p className="sm:mt-6 mt-4 text-sm">
          <Trans i18nKey={"sidebar.tab5text1"}>
            В ближайшее время мы отправим на ваш почтовый адрес всю
            дополнительную информацию о сеансе и ссылку для подключения.
          </Trans>
        </p>

        <div className="sm:mt-6 mt-4 text-sm">
          <p className="font-semibold mb-4">Ссылка для подключения</p>
          <input
            type="text"
            readOnly
            value={url}
            className="p-4 border border-[#3D425C] bg-transparent outline-none w-full mb-2"
            onClick={() => console.log(1)}
          />
          <p className="text-xs text-[#52587A] mb-4">
            Ссылка, получаемая пользователем на почтовый адрес, для подключения
            к демонстрации.
          </p>
          <button
            className="px-4 py-3.5 border border-[#3D425C] bg-transparent outline-none w-full rounded-full bg-[#3D425C] bg-opacity-20 hover:bg-[#52587A] hover:bg-opacity-20 transition-colors"
            onClick={handleClickCopy}
          >
            Скопировать
          </button>
        </div>

        <ToastContainer />
      </div>

      <div>
        <div className="mb-4 pb-6 font-gilroy font-semibold border-b border-[#3D425C] sm:block hidden">
          <p>
            <Trans i18nKey={"sidebar.tab5text2"}>Возникли вопросы?</Trans>
          </p>

          <div className="mt-6 flex justify-between">
            <div>
              <p className="opacity-50 text-sm leading-none">
                <Trans i18nKey={"sidebar.tab5text3"}>Свяжитесь с нами</Trans>
              </p>
            </div>

            <div className="flex flex-col gap-2">
              <p className="text-sm font-gilroy flex gap-3 items-center justify-end leading-none">
                <a href="tel:88007700076">8 800 770 00 76</a>
                <PhoneGradientIcon />
              </p>

              <p className="text-sm font-gilroy flex gap-3 items-center justify-end leading-none">
                <a href="mailto:info@graff.tech">info@graff.tech</a>
                <MailGradientIcon />
              </p>

              <p className="text-sm font-gilroy flex gap-3 items-center justify-end leading-none">
                <a href="https://graff.estate" target="_blank">
                  graff.estate
                </a>
                <WebGradientIcon />
              </p>
            </div>
          </div>
        </div>

        <div className="flex flex-col sm:gap-6 gap-4">
          <p className="text-center text-xs opacity-50 leading-tight">
            <Trans i18nKey={"sidebar.notice"}>
              Запись на демонстрацию работает в ознакомительном режиме и не
              сохраняет введенные данные
            </Trans>
          </p>

          <div className="flex sm:gap-4 gap-2">
            <button
              onClick={() => setIsOpen(false)}
              className="px-6 py-3 bg-gradient rounded-full sm:text-base text-sm font-medium flex items-center justify-between w-full"
            >
              <span>
                <Trans i18nKey={"sidebar.buttonHome"}>На главную</Trans>
              </span>
              <ArrowRightIcon className="w-8 h-8" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default SidebarTab5;