@daimo/pay/build/src/components/Common/SwitchButton/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { SwitchIcon } from '../../../assets/icons.js';
import styled from '../../../styles/styled/index.js';

const Container = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  width: fit-content;
  background: transparent;
`;
const IconWrapper = styled.div`
  opacity: ${({ $isFlipped }) => $isFlipped ? 1 : 1};
  transform: scaleY(${({ $isFlipped }) => $isFlipped ? -1 : 1});
  transition: all 0.2s ease-in-out;

  &.fade {
    opacity: 0;
    transform: scaleY(0);
  }
`;
const SwitchButton = ({ onClick, children }) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const [isFading, setIsFading] = useState(false);
  const handleClick = () => {
    setIsFading(true);
    setTimeout(() => {
      setIsFlipped(!isFlipped);
      setIsFading(false);
    }, 150);
    onClick();
  };
  return /* @__PURE__ */ jsxs(Container, { onClick: handleClick, children: [
    /* @__PURE__ */ jsx(IconWrapper, { $isFlipped: isFlipped, className: isFading ? "fade" : "", children: /* @__PURE__ */ jsx(SwitchIcon, {}) }),
    children
  ] });
};

export { SwitchButton as default };
//# sourceMappingURL=index.js.map