66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
import { Box, styled, useTheme } from "@mui/material";
|
|
import { ReactElement } from "react";
|
|
import GhostStyledIcon from "../Icon/GhostIcon";
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import LoopIcon from '@mui/icons-material/Loop';
|
|
|
|
const StyledArrow = styled(Box)(
|
|
({ theme, onClick }) =>
|
|
onClick && {
|
|
"&": {
|
|
transitionProperty: "all",
|
|
transitionTimingFunction: " cubic-bezier(.4,0,.2,1)",
|
|
transitionDuration: ".15s",
|
|
cursor: "pointer",
|
|
},
|
|
"&:hover": {
|
|
" & .rotate": {
|
|
WebkitTransform: "rotateZ(-360deg)",
|
|
MozTransition: "rotateZ(-360deg)",
|
|
transform: "rotateZ(-360deg)",
|
|
},
|
|
},
|
|
"& .rotate": {
|
|
WebkitTransition: "0.6s ease-out",
|
|
MozTransition: "0.6s ease-out",
|
|
transition: " 0.6s ease-out",
|
|
},
|
|
},
|
|
);
|
|
|
|
const SwapCollection = ({ UpperSwapCard, LowerSwapCard, arrowOnClick }) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box display="flex" flexDirection="column" maxWidth="476px">
|
|
{UpperSwapCard}
|
|
<Box display="flex" flexDirection="row" justifyContent="center">
|
|
<StyledArrow
|
|
width="21px"
|
|
height="21px"
|
|
borderRadius="6px"
|
|
sx={{ backgroundColor: theme.colors.gray[600] }}
|
|
textAlign="center"
|
|
marginTop={"-7px"}
|
|
zIndex="10"
|
|
onClick={arrowOnClick}
|
|
>
|
|
<Box pt="1px">
|
|
<GhostStyledIcon
|
|
viewBox="0 0 24 24"
|
|
className="rotate"
|
|
component={LoopIcon}
|
|
sx={{
|
|
fontSize: "15px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</StyledArrow>
|
|
</Box>
|
|
<Box marginTop="-7px">{LowerSwapCard}</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SwapCollection;
|