Page Comparison

import { ProfileImage, ProfileDetails, ImageCropper } from 'empower-profile-image';

..................


const paramImage = {
      size: 'lg',
      url:'',
      placeholder: 'IN',
      element1: 'Firstname Lastname',
      element2: 'Reporting Job',
      element3: 'Reporting Department',
}

const paramDetails = {
      size: 'lg',
      url:'',
      placeholder: 'IN',
      first_name: 'first_name',
      last_name: 'last_name',
      job: 'position title',
      department: 'department name',
      site: 'site',
      employeNumber: 'employeNumber',
      tenure: {
          year:  '2021',
          month: 'Aug'
      },
      reportingTo: {
          url:'',
          placeholder: 'IN',
          first_name: 'Reporting Firstname',
          last_name: 'Reporting Lastname',
          job: 'Reporting Job',
      }
}

   /**
     * 
     * setUploadImage - method that gets the value of the Image cropper component
     */

    const setUploadImage = (value) => {
        console.log('VALUE', value)
    }

......................

  return (
      <div className="App em-profile-image">
        <h3>Profile Image Component</h3>
        <ProfileImage config={paramImage}  />
  
        <h3>Profile Details Component</h3>
        <ProfileDetails config={paramDetails}  />
  
        <h3>Image Cropper Component</h3>
        <ImageCropper 
          uploadAction={(val) => setUploadImage(val)} 
          uploadResult={true}
        />
      </div>
    );