React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

@import url(https://fonts.googleapis.com/css2?family=Varela+Round&display=swap);

.section-width {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
}

body {
  // background: #20262E;
  // padding: 20px;
  font-family: Helvetica;
  margin: 0;
  font-family: 'Varela Round', sans-serif;
}

#app {
  // background: #fff;
  border-radius: 4px;
  // padding: 20px;
  transition: all 0.2s;
}

.app {
  position: relative;
}

.form-section {
  margin-top: 100px;
  
  &:first-child {
    margin-top: 50px;
  }
  
  &:last-child {
    margin-bottom: 60px;
  }
}

.section-title__primary {
  font-weight: bold;
  font-size: 23px;
  margin-bottom: 30px;
  
  &+.section-description__primary {
    margin-top: -20px;
  }
}

.section-description__primary {
  margin-top: 20px;
  margin-bottom: 30px;
  line-height: 23px;

  &+.section-description__primary {
    margin-top: -20px;
  }
}

.form-field {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  
  &:first-child {
    margin-top: 0;
  }
  
  .label {
    flex-grow: 0;
    flex-shrink: 0;
    font-weight: bold;
    // border: 1px dashed #eee;
    width: 150px;
    // color: #444;
  }
  
  .value {
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 20px;
    color: #444;
  }
}

.button {
  background: teal;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 7px;
  outline: none;
  font-weight: bold;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .loading-icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
  }
  
  &:hover {
    cursor: pointer;
    background: darken(#057eae, 5%);
    transition: all 0.15s ease;
  }
  
  &:active {
    background: darken(#057eae, 10%);
    transition: all 0.15s ease;
  }
}

.form-actions {
  display: flex;
  align-items: center;
  margin-top: 20px;
  width: calc(100% + 20px);
  margin-left: -10px;
  
  >*...

React

class SectionTitle extends React.Component {
	render() {
  	const { renderText } = this.props;
    
  	return (
      <h3 className={'section-title__primary'}>
        { renderText() }
      </h3>
    );
  }
}

class SectionDescription extends React.Component {
	static defaultProps = {
  	customClass: '',
    renderText: () => '',
  };
  
	render() {
  	const { renderText, customClass } = this.props;
    return (
    	<p className={'section-description__primary ' + customClass}>
    	  { renderText() }
    	</p>
    );
  }
}

class FormSection extends React.Component {
	render() {
  	const { children, customClass } = this.props;
    
    return (
    	<section className={'form-section section-width ' + customClass}>
    	  { children }
    	</section>
    );
  }
}

class FormField extends React.Component {
	render() {
  	const { label, value } = this.props;
  	return (
    	<div className='form-field'>
    	  <label className='label'>
    	    { label }
    	  </label>
        <span className='value'>
          { value }
        </span>
    	</div>
    );
  }
}

class FormActions extends React.Component {
	render() {
  	const { children } = this.props;
    
  	return (
    	<div className='form-actions'>
    	  { children }
    	</div>
    );
  }
}

class Button extends React.Component {
	render() {
  	const { text, onClick, loading } = this.props;
  	return (
    	<button className='button' onClick={onClick}>
        {
          loading && (<img 
            className='loading-icon' 
            src='https://push-content.springernature.io/pcf_sb_4_1510729276329136730/assets/images/ajax_loader.gif' 
          />)
        }
    	  <span>{ text }</span>
    	</button>
    );
  }
}

class Child extends React.Component {
	render() {
  	const { 
    	name, email,
      onEdit
    } = this.props;
 		return (
    	<div className='child-summary'>
        <div className='avatar' />
        <FormField label='Name' value={name} />
        <FormField label='email'...