@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); // Match the transition duration
        onClick();
    };
    return (jsxs(Container, { onClick: handleClick, children: [jsx(IconWrapper, { "$isFlipped": isFlipped, className: isFading ? "fade" : "", children: jsx(SwitchIcon, {}) }), children] }));
};

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