Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 2x 17x 2x 17x | import { Stack, SxProps, keyframes, styled } from "@mui/material";
import { palette } from "@palette";
import { PaperPlaneTiltIcon } from "@phosphor-icons/react";
type Props = {
hidden?: boolean;
sx?: SxProps;
customCopySx?: SxProps;
testId?: string;
onClick?: () => void;
disabled?: boolean;
type?: "button" | "submit" | undefined;
label?: string;
showIcon?: boolean;
};
const FloatingSendButton = ({
hidden = true,
sx,
testId,
onClick,
disabled = false,
type = "button",
label = "Send",
showIcon = true,
}: Props) => {
return (
<Button
sx={{ ...sx }}
type={type}
data-testid={testId}
hidden={hidden}
onClick={onClick}
disabled={disabled}
>
<Stack
sx={{
display: "flex",
flexDirection: "row",
textAlign: "center",
whiteSpace: "nowrap",
justifyContent: "space-between",
gap: "8px",
}}
>
{label}
{showIcon && <PaperPlaneTiltIcon size={20} />}
</Stack>
</Button>
);
};
const fadeIn = keyframes`
from {
opacity: 0;
bottom: 10px;
}
to {
opacity: 1;
bottom: 20px;
}
`;
const Button = styled("button")<{ hidden: boolean }>(({ hidden }) => ({
cursor: "pointer",
background: palette.primary.main,
color: palette.neutral.white,
borderRadius: "32px",
width: "auto",
hight: "46px",
fontSize: "18px",
lineHeight: "21.6px",
padding: "12px 24px",
position: "absolute",
bottom: "20px",
left: "50%",
transform: "translateX(-50%)",
zIndex: 9,
transition: "none",
display: hidden ? "none" : "block",
animation: hidden ? "none" : `${fadeIn} 0.5s ease-out`,
}));
export default FloatingSendButton;
|