@web3auth/ui/dist/lib.cjs/packages/ui/src/components/Header.js

Ui modal for web3Auth

'use strict';

var React = require('react');
var reactI18next = require('react-i18next');
var interfaces = require('../interfaces.js');
var localeImport = require('../localeImport.js');
var Icon = require('./Icon.js');
var jsxRuntime = require('react/jsx-runtime');

function Header(props) {
  const {
    onClose,
    appLogo,
    appName
  } = props;
  const [t] = reactI18next.useTranslation(undefined, {
    i18n: localeImport
  });
  const headerLogo = [interfaces.DEFAULT_LOGO_DARK, interfaces.DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
  const subtitle = t("modal.header-subtitle-name", {
    appName
  });
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "w3a-modal__header",
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "w3a-header",
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        children: [headerLogo && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "w3a-header__logo",
          children: /*#__PURE__*/jsxRuntime.jsx("img", {
            src: headerLogo,
            alt: ""
          })
        }), /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "w3a-header__title",
          children: t("modal.header-title")
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "w3a-header__subtitle",
          children: [subtitle, /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--group w3a--cursor-pointer",
            children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
              iconName: "information-circle-light",
              darkIconName: "information-circle"
            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
              className: "w3a--absolute w3a--top-4 w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 group-hover:w3a--flex",
              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                className: "w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                className: `w3a--relative w3a--p-4 w3a--w-[270px] w3a--translate-x-[-16px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${subtitle.length > 34 ? "-w3a--ml-[100px]" : ""}`,
                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                  className: "w3a--text-xs w3a--font-medium w3a--mb-1 w3a--text-app-gray-900 dark:w3a--text-app-white",
                  children: t("modal.header-tooltip-title")
                }), /*#__PURE__*/jsxRuntime.jsx("div", {
                  className: "w3a--text-xs w3a--text-app-gray-400",
                  children: t("modal.header-tooltip-desc")
                })]
              })]
            })]
          })]
        })]
      })
    }), /*#__PURE__*/jsxRuntime.jsx("button", {
      type: "button",
      onClick: onClose,
      className: "w3a-header__button w3ajs-close-btn ",
      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
        iconName: "x-light",
        darkIconName: "x-dark"
      })
    })]
  });
}
const memoizedHeader = /*#__PURE__*/React.memo(Header, (prevProps, nextProps) => {
  if (prevProps.appLogo !== nextProps.appLogo) {
    return true;
  }
  return false;
});
memoizedHeader.displayName = "Header";

module.exports = memoizedHeader;