React

by Abdul Ahmad

HTML

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

SCSS

body {
  background: #20262E;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
}

html {
  margin: 0;
  padding: 0;
}

.image-wrap {
  display: inline-block;
  
  &.debug {
    border: 1px dashed white;
  }
  
  &.center {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  &.full-width {
    width: 100%;
  }
  
  &.profile-image {
    width: 100px;
    height: 100px;
  }
  
  .image {
    width: 100%;
    height: auto;
    
    &.profile-image-overflow {
      width: 150px;
    }
  }
  
}

.page-section {
  padding: 30px 0;
}

.page-width {
  max-width: 532px;
  margin: 0 auto;
  padding: 0 16px;
  
  &.debug {
    border-right: 1px dashed lighten(#20262E, 10%);
    border-left: 1px dashed lighten(#20262E, 10%);
  }
}

React

function App() {
  return (
    <React.Fragment>
      <PageSection>
        <Image 
          debug
          src='https://static.vecteezy.com/system/resources/thumbnails/027/254/720/small/colorful-ink-splash-on-transparent-background-png.png' />  	  
      </PageSection>
      <PageSection>
        <Image
          fullWidth
          debug
          src='https://static.vecteezy.com/system/resources/thumbnails/027/254/720/small/colorful-ink-splash-on-transparent-background-png.png' />  	  
      </PageSection>
      <PageSection>
        <Image
          wrapperClasses={['profile-image']}
          imageClasses={['profile-image-overflow']}
          center
          debug
          src='https://static.vecteezy.com/system/resources/thumbnails/027/254/720/small/colorful-ink-splash-on-transparent-background-png.png' />  	  
      </PageSection>
    </React.Fragment>

  );
}

function Image({ fullWidth, center, src, debug, wrapperClasses, imageClasses }) {
	let className = 'image-wrap';
  if (fullWidth) className += ' full-width';
  if (center) className += ' center';
  if (debug) className += ' debug';
  if (wrapperClasses) {
  	className = wrapperClasses.reduce((acc, className) => {
    	return acc += ' ' + className;
    }, className);
  }
  
  let imageClass = 'image';
  if (imageClasses) {
  	imageClass = imageClasses.reduce((acc, className) => {
    	return acc += ' ' + className;
    }, imageClass);
  }
  
	return (
  	<div className={className}>
  	  <img src={src} className={imageClass} />
  	</div>
  );
}

function PageSection({ children }) {
	return (
  	<section className='page-section'>
  	  <div className='page-width'>
  	    { children }
  	  </div>
  	</section>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))