Create Account

Please enter your details to Create account

setImage(file)} /> Full Name } type="text" placeholder="John Smith" onChange={(e) => handleChange('full_name', e.target.value)} /> Phone Number } type="text" placeholder="+123 456 7890" onChange={(e) => handleChange('phone_number', e.target.value)} /> Address

}
              placeholder="Enter address"
              onChange={(e) => handleChange('address', e.target.value)}
            />
          </Form.Group>

<Form.Group className="mt-4">
            <Form.Label>Gender</Form.Label>
            <Textinput
              iconLeft={<img src="/images/icons/location.png" />}
              placeholder="Enter gender"
              onChange={(e) => handleChange('gender', e.target.value)}
            />
          </Form.Group>

<Form.Group className="mt-4">
            <Form.Label>Date of Birth</Form.Label>
            <Textinput
              iconLeft={<img src="/images/icons/location.png" />}
              placeholder="Enter dob"
              onChange={(e) => handleChange('dob', e.target.value)}
            />
          </Form.Group>

<CustomSelect
            label="Country"
            icon={<img src="/images/icons/country.png" />}
            defaultValue={selectedCountry}
            options={Country.getAllCountries().map((country) => ({
              value: country.isoCode,
              label: country.name,
              countryData: country,
            }))}
            onChange={(option: any) => setSelectedCountry(option.countryData)}
          />

<CustomSelect
            label="State"
            icon={<img src="/images/icons/state.png" />}
            defaultValue={selectedState}
            options={stateOptions.map((state) => ({
              value: state.isoCode,
              label: state.name,
              stateData: state,
            }))}
            onChange={(option: any) => setSelectedState(option.stateData)}
            isDisabled={!selectedCountry}
          />

<CustomSelect
            label="City"
            icon={<img src="/images/icons/building.png" />}
            defaultValue={selectedCity}
            options={cityOptions.map((city) => ({
              value: city.name,
              label: city.name,
              cityData: city,
            }))}
            onChange={(option: any) => setSelectedCity(option.cityData)}
            isDisabled={!selectedState}
          />

<div className="d-flex justify-content-center align-items-center">
            <Button
              onClick={handleSubmit}
              type="submit"
              size="md"
              className="mt-5 btn btn-feature auth-btn"
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <Spinner animation="border" size="sm" role="status" className="me-2" />
                  Creating...
                </>
              ) : (
                'Create Account'
              )}
            </Button>
          </div>
        </div>
      </div>
    </>
  );
};

export default CreateProfile;