@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
34 lines • 1.35 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import { IconButton } from '@mui/material';
export const pinButtonClassName = 'pin-button';
const animationDuration = 225;
export const PinChainButton = ({ isPinned, onPin }) => {
const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon;
return (_jsx(IconButton, { className: pinButtonClassName, edge: "end", "aria-label": "pin", onClick: (e) => {
e.stopPropagation();
onPin();
}, sx: {
position: 'absolute',
top: 0,
left: 0,
height: 28,
width: 28,
transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
...(isPinned
? {
opacity: 1,
transform: 'translateY(0)',
}
: {
opacity: 0,
transform: 'translateY(-50%)',
}),
}, children: _jsx(PinIcon, { sx: {
height: 20,
width: 20,
color: 'text.secondary',
} }) }));
};
//# sourceMappingURL=PinChainButton.js.map