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 | 11x 55x 19x | import SelfieIcon from "@assets/icons/SelfieIcon";
import { Text } from "@common/Text";
import { TAKE_SELFIE_INSTRUCTION } from "@constants/constants";
import { Box } from "@mui/material";
import { Stack } from "@mui/material";
import { palette } from "@palette";
function InstructionsComponent() {
return (
<Stack
flexDirection={{ xs: "column-reverse", sm: "row" }}
justifyContent="space-between"
>
<Stack
width={{ xs: "100%", sm: "333px" }}
maxWidth="fit-content"
spacing={1}
mt={{ xs: "24px", sm: 0 }}
mr={{ sm: "20px" }}
>
<Text fontSize="18px" pb="24px">
{TAKE_SELFIE_INSTRUCTION}
</Text>
<ul style={{ paddingLeft: "20px", margin: 0, listStyleType: "disc" }}>
{infoArray.map((text) => (
<li key={text} style={{ marginBottom: "4px" }}>
<Text useParse fontSize="14px">
{text}
</Text>
</li>
))}
</ul>
</Stack>
<Box
pt="24px"
width={{ xs: "100%", sm: "184px" }}
height="158px"
overflow="hidden"
borderRadius="16px"
bgcolor={palette.neutral[10]}
minWidth="158px"
alignItems="center"
display="flex"
justifyContent="center"
>
<SelfieIcon height="142" width="152" />
</Box>
</Stack>
);
}
export default InstructionsComponent;
const infoArray = [
"Use the <strong>same ID</strong> you uploaded previously.",
"Show the <strong>photo side</strong> of your ID to the camera.",
"<strong>Keep your face clearly visible</strong> (no masks, hats, or glasses).",
"Make sure your <strong>ID is fully visible</strong> and not covered by your fingers.",
"ID must be <strong>government-issued and valid.</strong>",
];
|