React

by Abdul Ahmad

HTML

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

SCSS

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

#app {
  transition: all 0.2s;
}

.nav {
  padding: 10px 0;
  background: white;
}

.nav-item {
  margin-right: 32px;
  
  &:last-child {
    margin-right: 0;
  }
}

.image-wrap {
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  img {
    width: 100%;
    height: auto;
  }
}

.content {
  margin: 0 auto;
  width: calc(100% - 40px);
  max-width: 1200px;
  display: flex;
  align-items: center;
}

.logo--pokemon {
  width: 50px;
}

React

function App() {
  return (
    <nav class='nav'>
      <div class='content'>
        <NavItem>
          <Image 
            src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png' 
            />
        </NavItem>
        <NavItem>
          <Image 
            src='https://www.pngmart.com/files/4/Pepsi-Logo-PNG-Pic.png' 
          />
        </NavItem>
        <NavItem>
          <Image 
            src='https://seeklogo.com/images/G/google-logo-28FA7991AF-seeklogo.com.png'
          />
        </NavItem>
        <NavItem>
          <PokemonLogo />
        </NavItem>
      </div>
    </nav>
  );
}

function PokemonLogo() {
	return (
    <Image 
      src='https://seeklogo.com/images/P/Pokemon-logo-497D61B223-seeklogo.com.png'
      customClassWrapper='logo--pokemon'
      />
  );
}

function NavItem({ children }) {
	return (
  	<div className='nav-item'>
  	  { children }
  	</div>
  );
}

function Image({ src, customClassWrapper }) {
	return (
    <div class={'image-wrap ' + customClassWrapper}>
      <img src={src} />
    </div>
  );
}

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