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

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

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var Buttons = require('../design/Buttons.js');

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

exports.OAuthButton = OAuthButton;
//# sourceMappingURL=OAuth.js.map