components/premium/modal.tsx

import { useContext, useRef } from "react";
import { useClickAway } from "react-use";
import classNames from "classnames";

import { login } from "utils/auth";
import { Premium } from ".";
import { PremiumContext } from "./premium";
import ModalPremiumIllustration from "assets/images/premium-modal/modal-illustration.webp";
import { FormattedMessage } from "react-intl";

export const PremiumModal = () => {
  const { open, setOpen } = useContext(PremiumContext);
  const ref = useRef(null);
  const onClose = () => setOpen(false);

  useClickAway(ref, () => onClose());
  return (
    <div
      className={classNames(
        "fixed top-0 left-0 w-full h-full bg-dark-default z-30 bg-opacity-50 backdrop-blur-sm flex items-center justify-center transition-all duration-200 p-6",
        {
          "opacity-0 pointer-events-none": !open,
        }
      )}
    >
      <div
        ref={ref}
        className={classNames(
          "max-w-3xl bg-dark-500 w-full rounded-2xl grid grid-cols-1 lg:grid-cols-5 overflow-hidden shadow-xl transform transition-all duration-400",
          {
            "opacity-0 scale-75": !open,
          }
        )}
      >
        <div className="lg:col-span-3 py-9 px-8 text-center">
          <div className="flex items-center justify-center mb-3">
            <Premium size={56} tooltip={false} />
          </div>
          <h3 className="text-white font-bold text-2xl text-center mt-1 tracking-wide">
            <FormattedMessage id="freemium.modal.title" />
          </h3>
          <p className="text-lg text-dark-100">
            <FormattedMessage
              id="freemium.modal.subtitle"
              values={{
                span: (t) => <span className="text-white font-bold">{t}</span>,
              }}
            />
          </p>
          <p className="text-xl text-white font-bold mt-5 flex items-center justify-center gap-2">
            <FormattedMessage id="freemium.modal.step.title" />
          </p>
          <div className="bg-dark-default mx-auto w-full mt-4 rounded-lg">
            <div className="flex items-center justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
              <span className="font-title text-white text-sm">1.</span>
              <span>
                <FormattedMessage
                  id="freemium.modal.step.1"
                  values={{
                    span: (t) => (
                      <span className="text-white font-medium">{t}</span>
                    ),
                  }}
                />
              </span>
            </div>
            <div className="flex items-center text-left justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
              <span className="font-title text-white text-sm">2.</span>
              <span>
                <FormattedMessage
                  id="freemium.modal.step.2"
                  values={{
                    span: (t) => (
                      <span className="text-white font-medium">{t}</span>
                    ),
                  }}
                />
              </span>
            </div>
            <div className="flex items-center justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
              <span className="font-title text-white text-sm">3.</span>
              <span>
                <FormattedMessage
                  id="freemium.modal.step.3"
                  values={{
                    span: (t) => (
                      <span className="text-white font-medium">{t}</span>
                    ),
                  }}
                />
              </span>
            </div>
            <div className="flex items-center justify-start px-4 py-3 gap-3 border-b border-dashed border-dark-300 font-semibold text-yellow">
              <span className="font-title text-sm">4.</span>
              <span>
                <FormattedMessage id="freemium.modal.step.4" />
              </span>
            </div>
          </div>
          <button
            className="bg-blue text-white rounded-lg w-full text-center px-3 py-3 mt-5 font-semibold hover:bg-opacity-80 flex items-center justify-center gap-2"
            onClick={login}
          >
            <FormattedMessage id="freemium.modal.cta" />
            <Premium size="22" tooltip={false} />
          </button>
        </div>
        <div
          style={
            {
              // backgroundImage: `url(${ModalPremiumIllustration.src})`,
            }
          }
          className="w-full h-full bg-cover hidden lg:block bg-center lg:col-span-2 relative bg-blue"
        >
          <div
            className="max-w-max absolute top-5 right-5 cursor-pointer"
            onClick={onClose}
          >
            <svg
              width={14}
              height={14}
              fill="none"
              viewBox="0 0 123 123"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M122.443 110.277L73.625 61.459l48.695-48.694L110.081.526 61.387 49.22 12.569.402.417 12.554l48.818 48.818L.553 110.054l12.239 12.238 48.681-48.681 48.843 48.842 12.127-12.176z"
                fill="#000"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
};