I have 3 similar forms and i can't understand should i make h1, divider, link reusable if they are in every form but with different labels. Thanks.
Here, is my code:
<>
<Form id="form" onSubmit={handleSubmit}>
<h1>Sign in to SyncTalk</h1> // this title
<GoogleButton label="Sign in" />
<Divider className="divider">or</Divider> // this divider
<div className="input-container">
<StyledTextField
type="email"
name="email"
label="Email"
variant="outlined"
value={values.email}
onChange={handleChange}
/>
<ErrorMessage name="email" component="div" className="error" /> // this
</div>
<div className="nav">
<FormButton label="Send link" />
<div className="to-sign-in">
Don't have an account?
<Link href="/sign-up">Sign up</Link> // this link
</div>
</div>
</Form>
<Alert alertLabel={alertLabel} />
</>;