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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 13x 39x 5x 3x 39x 39x | import { Stack } from "@mui/material";
import { CloudArrowUpIcon, PencilSimpleIcon, SignatureIcon } from "@phosphor-icons/react";
import { Modals_types } from "./modal.types";
import GiveText from "@shared/Text/GiveText";
import { Box } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import { Dispatch, SetStateAction } from "react";
interface Props {
setModalOpen: Dispatch<SetStateAction<Modals_types>>;
}
function DefaultMode({ setModalOpen }: Props) {
return (
<Stack
flexDirection={{
xs: "column",
sm: "row",
}}
gap="16px"
mt="12px"
>
{signatureOptions.map(({ Icon, label, description, modal }) => {
return (
<CardContainer onClick={() => setModalOpen(modal)} key={label}>
<Stack
flexDirection={{
xs: "row",
sm: "column",
}}
gap="12px"
>
<IconContainer>
<Icon size="25px" />
</IconContainer>
<Box>
<GiveText
variant="bodyS"
textAlign={{
xs: "left",
sm: "center",
}}
fontWeight={400}
color="primary"
>
{label}
</GiveText>
<GiveText
variant="bodyXS"
fontWeight={400}
color="secondary"
textAlign={{
xs: "left",
sm: "center",
}}
mt="8px"
>
{description}
</GiveText>
</Box>
</Stack>
</CardContainer>
);
})}
</Stack>
);
}
export default DefaultMode;
const signatureOptions = [
{
Icon: CloudArrowUpIcon,
label: "Upload Signature",
description:
"Please upload a clear and legible image of your signature for verification purposes.",
modal: "upload" as Modals_types,
},
{
Icon: SignatureIcon,
label: "Sign",
description:
"Use the paint tool on your trackpad or mouse to digitally replicate your signature for submission.",
modal: "sign" as Modals_types,
},
{
Icon: PencilSimpleIcon,
label: "Generate",
description:
"Generate a digital signature by entering your name and utilizing the automated signature creation feature",
modal: "generate" as Modals_types,
},
];
const CardContainer = styled(Stack)(({ theme }) => ({
width: "240px",
border: `1.5px solid ${theme.palette.border?.primary}`,
borderRadius: "8px",
padding: "63px 16px",
cursor: "pointer",
[theme.breakpoints.down("sm")]: {
width: "100%",
padding: "16px",
},
}));
const IconContainer = styled(Box)(({ theme }) => ({
margin: "0 auto",
height: "25px",
width: "25px",
[theme.breakpoints.down("sm")]: {
margin: 0, // remove centering on mobile
},
}));
|