sass gpt prompt
Mon Jun 05 2023 07:47:04 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE #react.js #css #javascript
"""
<form className="form">
<div className="row form-row">
<div
className="col-md-4"
>
<div className="mb-3">
<label
htmlFor="forename"
className="form-label w-100 forename-label"
>
Forename(s) - All First and Middle Names(as per passport)
</label>
<input
type="text"
className="form-control forename-input"
id="forename"
placeholder="Aron Mathew"
onChange={(e) => setForeName(e.target.value)}
{...register('foreName', {
required: true,
})}
/>
{
errors?.foreName?.type === 'required' && (
<span className="error">
please enter your forename
</span>
)
}
</div>
</div>
<div className="col" />
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="surname" className="form-label w-100">
Surname*
</label>
<input
type="text"
className="form-control surname-input"
id="surname"
aria-describedby="surnameHelp"
placeholder="Eg: Philip"
onChange={(e) => setSurName(e.target.value)}
{...register('surName', {
required: true,
})}
/>
{
errors?.surName?.type === 'required' && (
<span className="error">
please enter your surname
</span>
)
}
</div>
</div>
</div>
{/* date of birth and nationality */}
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="dateOfBirth" className="form-label date-of-birth-label w-100">
Date of Birth*
</label>
<DatePicker
onChange={(e: any) => {
handleDatePicker(e);
}}
value={dateOfBirth}
renderInput={(params: any) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: 'Select Date of Birth',
}}
{
...register('dateOfBirth', {
required: true,
})
}
className="date-picker date-picker-input"
/>
)}
className="date-picker-field"
/>
{
errors?.surName?.type === 'required' && (
<span className="error">
please enter your date of birth
</span>
)
}
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="nationality" className="form-label nationality-label w-100">
Nationality*
</label>
<Autocomplete
disablePortal
id="combo-box-demo"
options={nationalitiesList}
isOptionEqualToValue={(option: any, value: any) => option.nationalityGuid === value.nationalityGuid}
renderInput={(params) => (
<TextField
{...params}
{...register('nationality', {
required: true,
})}
/>
)}
onChange={(e, newVal: any) => {
console.log('newVal', newVal);
setNationalityGuid(newVal?.nationalityGuid);
}}
/>
</div>
</div>
</div>
{/* passport number and emirates ID */}
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="passportNo" className="form-label passport-number-label w-100">
Passport Number*
</label>
<input
type="text"
className="form-control passport-number-input"
id="passportNo"
placeholder="xx xxxx xxxx"
onChange={(e) => setPassportNo(e.target.value)}
{...register('passportNo', {
required: true,
})}
/>
{
errors?.passportNo?.type === 'required' && (
<span className="error">
please enter your passport number
</span>
)
}
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="emiratesId" className="form-label emirates-id-label w-100">
Emirates ID*
</label>
<input
type="text"
className="form-control emirates-id-input"
id="emiratesId"
placeholder="Eg: 123456789"
onChange={(e) => setEmiratesID(e.target.value)}
{...register('emiratesID', {
required: true,
})}
/>
{
errors?.emiratesID?.type === 'required' && (
<span className="error">
please enter your emirates id
</span>
)
}
</div>
</div>
</div>
<h4 className="form-sub-head">
Current Residential Address (Not PO Box)
<hr />
</h4>
"""
You are scss expert.
you have to nest form-sub-head element of form class. You have to follow sass conventions.
Return the converted styling.
Comments