diff options
Diffstat (limited to 'client/src/pages/Enrollment/Address/Address.jsx')
| -rw-r--r-- | client/src/pages/Enrollment/Address/Address.jsx | 226 |
1 files changed, 116 insertions, 110 deletions
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index d4ffe81..571d7ad 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -5,8 +5,10 @@ import { Country, State, City } from 'country-state-city' import Select from 'react-select' import styles from './Address.module.css' +import { useTranslation } from 'react-i18next' const Address = ({ formData, setFormData }) => { + const { t } = useTranslation() const countries = Country.getAllCountries() const updatedCountries = countries.map((country) => ({ @@ -16,114 +18,118 @@ const Address = ({ formData, setFormData }) => { })) const updatedStates = (countryId) => - State - .getStatesOfCountry(countryId) - .map((state) => ({ label: state.name, value: state.id, ...state })) + State.getStatesOfCountry(countryId).map((state) => ({ + label: state.name, + value: state.id, + ...state + })) const updatedCities = (countryID, stateId) => - City - .getCitiesOfState(countryID, stateId) - .map((city) => ({ label: city.name, value: city.id, ...city })) + City.getCitiesOfState(countryID, stateId).map((city) => ({ + label: city.name, + value: city.id, + ...city + })) - const customStyles = { - control: (base, state) => ({ - ...base, - width: '330px', - height: '60px', - margin: '10px 0px', - // padding: '20px 10px', - border: '3px solid', - borderRadius: '10px !important' - }), - input: (base, state) => ({ - ...base, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '0px', - margin: '0px' - }) - } - - console.log(formData.country, formData.state, formData.district, formData.village) + const customStyles = { + control: (base, state) => ({ + ...base, + width: '330px', + height: '60px', + margin: '10px 0px', + border: '3px solid', + borderRadius: '10px !important' + }), + input: (base, state) => ({ + ...base, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '0px', + margin: '0px' + }) + } return ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.address}> <div className={styles.address__container}> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='country'>Country</label> - <Select - id="country" - name="country" - label="country" - options={updatedCountries} - value={formData.country} - onChange={e => { - setFormData({ - ...formData, - country: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='state'>State</label> - <Select - id="state" - name="state" - options={updatedStates(formData.country.isoCode)} - value={formData.state} - onChange={e => { - setFormData({ - ...formData, - state: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='city'>District</label> - <Select - id="city" - name="city" - options={updatedCities(formData.country.isoCode, formData.state.isoCode)} - value={formData.district} - onChange={e => { - setFormData({ - ...formData, - district: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <Input - id="town" - label="Village / Town" - value={formData.village} - type="text" - onChange={(e) => { - setFormData({ - ...formData, - village: e.target.value - }) - }} - placeholder="Enter your Village / Town" - /> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="country">{t('COUNTRY')}</label> + <Select + id="country" + name="country" + label="country" + options={updatedCountries} + value={formData.country} + onChange={(e) => { + setFormData({ + ...formData, + country: e + }) + }} + styles={customStyles} + /> + </div> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="state">{t('STATE')}</label> + <Select + id="state" + name="state" + options={updatedStates(formData.country.isoCode)} + value={formData.state} + onChange={(e) => { + setFormData({ + ...formData, + state: e + }) + }} + styles={customStyles} + /> </div> - <div className={styles.address__container}> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="city">{t('DISTRICT')}</label> + <Select + id="city" + name="city" + options={updatedCities( + formData.country.isoCode, + formData.state.isoCode + )} + value={formData.district} + onChange={(e) => { + setFormData({ + ...formData, + district: e + }) + }} + styles={customStyles} + /> + </div> + </div> + <Input + id="town" + label={t('VILLAGE_TOWN')} + value={formData.village} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + village: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} + /> + </div> + <div className={styles.address__container}> <Input id="houseNo" - label="House Number/ Apartment" + label={t('HOUSE_NUMBER_APARTMENT')} value={formData.houseNo} type="text" onChange={(e) => { @@ -132,11 +138,11 @@ const Address = ({ formData, setFormData }) => { houseNo: e.target.value }) }} - placeholder="Enter your House Number / Apartment" + placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')} /> <Input id="street" - label="Street / Road" + label={t('STREET_ROAD')} value={formData.street} type="text" onChange={(e) => { @@ -145,11 +151,11 @@ const Address = ({ formData, setFormData }) => { street: e.target.value }) }} - placeholder="Enter the Street / Road" + placeholder={t('ENTER_YOUR_STREET_ROAD')} /> <Input id="locality" - label="Area / Locality" + label={t('AREA_LOCALITY')} value={formData.locality} type="text" onChange={(e) => { @@ -158,11 +164,11 @@ const Address = ({ formData, setFormData }) => { locality: e.target.value }) }} - placeholder="Enter your Area / Locality" + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> <Input id="postOffice" - label="Post Office" + label={t('POST_OFFICE')} value={formData.postOffice} type="text" onChange={(e) => { @@ -171,13 +177,13 @@ const Address = ({ formData, setFormData }) => { postOffice: e.target.value }) }} - placeholder="Enter your Village / Town" + placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} /> - </div> + </div> <div className={styles.address__container}> <Input id="landmark" - label="Landmark" + label={t('LANDMARK')} value={formData.landmark} type="text" onChange={(e) => { @@ -186,11 +192,11 @@ const Address = ({ formData, setFormData }) => { landmark: e.target.value }) }} - placeholder="Enter the Landmark" + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} /> <Input id="pincode" - label="Pincode" + label={t('PINCODE')} value={formData.pincode} type="text" onChange={(e) => { @@ -199,7 +205,7 @@ const Address = ({ formData, setFormData }) => { pincode: e.target.value }) }} - placeholder="Enter your area Pincode" + placeholder={t('ENTER_YOUR_AREA_PINCODE')} pattern="[0-9]+" /> </div> |