@turnkey/react-wallet-kit/dist/components/auth/OAuth.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { ActionButton } from '../design/Buttons.mjs';

function OAuthButton(props) {
  var containerRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showText = _useState2[0],
    setShowText = _useState2[1];
  var name = props.name,
    icon = props.icon,
    onClick = props.onClick,
    className = props.className;
  useEffect(function () {
    var observer = new ResizeObserver(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 1),
        entry = _ref2[0];
      if (!entry) return;
      var width = entry.contentRect.width;
      setShowText(width > 300);
    });
    if (containerRef.current) {
      observer.observe(containerRef.current);
    }
    return function () {
      return observer.disconnect();
    };
  }, []);
  return jsx("div", {
    ref: containerRef,
    className: "w-full h-full",
    children: jsxs(ActionButton, {
      onClick: onClick,
      className: "flex items-center justify-center gap-2 w-full h-full rounded-md bg-button-light dark:bg-button-dark text-inherit ".concat(className || ""),
      children: [icon, showText && jsx("span", {
        className: "truncate",
        children: "Continue with ".concat(name)
      })]
    })
  });
}

export { OAuthButton };
//# sourceMappingURL=OAuth.mjs.map