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 | 18x 18x | import { Text } from "@common/Text";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { Box, Stack } from "@mui/material";
import { XIcon } from "@phosphor-icons/react";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
function Header({ handleClose }: { handleClose: () => void }) {
const { isMobileView } = useCustomTheme();
return (
<Box>
<FadeUpWrapper delay={50}>
<Stack
flexDirection="row"
alignItems="center"
justifyContent="space-between"
>
<Text fontWeight="regular" fontSize="18px" color="#403D3D">
Action Required
</Text>
{!isMobileView && (
<Box
onClick={handleClose}
component="button"
sx={{ all: "unset", cursor: "pointer" }}
>
<XIcon color="#8F8F8F" size={26} />
</Box>
)}
</Stack>
</FadeUpWrapper>
<FadeUpWrapper delay={100}>
<Text
borderRadius="12px"
mt="8px"
fontSize="14px"
fontWeight="book"
color="#8F8F8F"
>
You have received this message because we require some additional
information. Please refer to the message below.
</Text>
</FadeUpWrapper>
</Box>
);
}
export default Header;
|