Adding welcome popup card

show a welcome popup to the invited user when they first lands on the campaign or the website

import { FC } from 'react';

interface ICampaignUIConfig {
  showPopup: boolean;
  textColor: string;
  backgroundColor: string;
  buttonColor: string;
  buttonText: string;
  buttonTextColor: string;
  text: string;
  title: string;
}

interface CampaignPopupCardProps {
  campaignConfig: ICampaignUIConfig;
  isRegisteredInvitee: boolean;
  closeModal: () => void;
}

const CampaignPopupCard: FC<CampaignPopupCardProps> = ({
  campaignConfig,
  closeModal,
  isRegisteredInvitee,
}): JSX.Element | null => {
  const {
    backgroundColor = '#171717',
    textColor = '#FFFFFF',
    title = 'Welcome',
    text = 'Welcome to our campaign',
    buttonColor = '#0284c7',
    buttonTextColor = '#FFFFFF',
    buttonText = 'Got it',
  } = campaignConfig;

  // If registered is already registered within the campaign, we don't show welcome popup
  if (isRegisteredInvitee) return null;
  return (
    <div
      className="max-w-md rounded-md p-3"
      style={{
        backgroundColor,
      }}>
      <p
        className="flex justify-center text-lg font-bold"
        style={{
          color: textColor,
        }}>
        {title}
      </p>
      <p
        className="mt-2 flex justify-center text-base"
        style={{
          color: textColor,
        }}>
        {text}
      </p>

      <button
        type="button"
        className="mt-4 flex w-full justify-center px-3 rounded-md
        py-1 font-semibold cursor-pointer hover:brightness-75"
        style={{
          backgroundColor: buttonColor,
        }}
        onClick={closeModal}>
        <p
          className="text-base"
          style={{
            color: buttonTextColor,
          }}>
          {buttonText}
        </p>
      </button>
    </div>
  );
};

export default CampaignPopupCard;