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 | 1x 13x 13x | import { FormProvider } from "react-hook-form";
import { useSignupPersonalDetails } from "../hooks/usePersonalDetails";
import { Stack } from "@mui/material";
import { Grid } from "@mui/material";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import { sanitizePaste } from "@utils/index";
import SignupNavigation from "./SignupNavigation";
import ScrollableContent from "./ScrollableContent";
type Props = {
handleUpdateStatusValue: (value: number) => void;
personalDetailsStatusBar: number;
handleNext: () => void;
handleBack: () => void;
};
const SignupPersonalDetails = ({
handleUpdateStatusValue,
personalDetailsStatusBar,
handleNext,
handleBack,
}: Props) => {
const { methods, isValid, onSubmit, goBackHandler } =
useSignupPersonalDetails({
handleUpdateStatusValue,
handleNext,
handleBack,
});
return (
<FormProvider {...methods}>
<Stack component="form" onSubmit={methods.handleSubmit(onSubmit)}>
<ScrollableContent spacing="20px" alignItems="flex-end">
<Grid container spacing={1.5}>
<Grid item xs={12} sm={6}>
<HFGiveInput
name="firstName"
label="First Name"
placeholder="First Name"
/>
</Grid>
<Grid item xs={12} sm={6}>
<HFGiveInput
name="lastName"
label="Last Name"
placeholder="Last Name"
/>
</Grid>
<Grid item xs={12}>
<HFGiveInput
name="email"
label="Email"
placeholder="Email"
fullWidth
handleNormalizeInput={sanitizePaste}
/>
</Grid>
</Grid>
</ScrollableContent>
<SignupNavigation
disabled={!isValid || personalDetailsStatusBar < 100}
handleGoBack={goBackHandler}
/>
</Stack>
</FormProvider>
);
};
export default SignupPersonalDetails;
|