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