Flipkart Header Component Clone Example with Logo, Search and Dropdown

import React, { useState } from 'react';
import './style.css';
import flipkartLogo from '../../images/logo/flipkart.png';
import goldenStar from '../../images/logo/golden-star.png';
import { IoIosArrowDown, IoIosCart, IoIosSearch } from 'react-icons/io';
import { 
  Modal,
  MaterialInput,
  MaterialButton,
  DropdownMenu
} from '../MaterialUI';

/**
* @author
* @function Header
**/

const Header = (props) => {

  const [loginModal, setLoginModal] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  

  return (
    <div className="header">
      <Modal 
        visible={loginModal}
        onClose={() => setLoginModal(false)}
      >
        <div className="authContainer">
          <div className="row">
            <div className="leftspace">
              <h2>Login</h2>
              <p>Get access to your Orders, Wishlist and Recommendations</p>
            </div>
            <div className="rightspace">
          

                <MaterialInput 
                  type="text"
                  label="Enter Email/Enter Mobile Number"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />

                <MaterialInput 
                  type="password"
                  label="Enter Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  rightElement={<a href="#">Forgot?</a>}
                />
                <MaterialButton 
                  title="Login"
                  bgColor="#fb641b"
                  textColor="#ffffff"
                />

              

            </div>
          </div>
        </div>
      </Modal>
      <div className="subHeader">
        <div className="logo">
          <a href="">
            <img src={flipkartLogo} className="logoimage" alt="" />
          </a>
          <a style={{ marginTop: '-10px' }}>
            <span className="exploreText">Explore</span>
            <span className="plusText">Plus</span>
            <img src={goldenStar} className="goldenStar" alt="" />
          </a>
        </div>
        <div style={{
          padding: '0 10px'
        }}>
          <div className="searchInputContainer">
            <input
              className="searchInput"
              placeholder={'search for products, brands and more'}
            />
            <div className="searchIconContainer">
              <IoIosSearch style={{
                color: '#2874f0'
              }} />
            </div>

          </div>
        </div>
        <div className="rightMenu">
          <DropdownMenu
            menu={
              <a className="loginButton" onClick={() => setLoginModal(true)}>
                Login
              </a>
            }
            menus={[
              { label: 'My Profile', href: '', icon: null },
              { label: 'Flipkart Plus Zone', href: '', icon: null },
              { label: 'Orders', href: '', icon: null },
              { label: 'Wishlist', href: '', icon: null },
              { label: 'Rewards', href: '', icon: null },
              { label: 'Gift Cards', href: '', icon: null },
            ]}
            firstMenu={
              <div className="firstmenu">
                <span>New Customer?</span>
                <a style={{ color: '#2874f0' }}>Sign Up</a>
              </div>
            }
          />
          <DropdownMenu
            menu={
              <a className="more">
                <span>More</span>
                <IoIosArrowDown />
              </a>
            }
            menus={[
              { label: 'Notification Preference', href: '', icon: null },
              { label: 'Sell on flipkart', href: '', icon: null },
              { label: '24x7 Customer Care', href: '', icon: null },
              { label: 'Advertise', href: '', icon: null },
              { label: 'Download App', href: '', icon: null }
            ]}
          />
          <div>
            <a className="cart">
              <IoIosCart />
              <span style={{ margin: '0 10px' }}>Cart</span>
            </a>
          </div>
        </div>

      </div>
    </div>
  )

}

export default Header

.header{
    width: 100%;
    height: 56px;
    background: #2874f0;
}
.subHeader{
    max-width: 1100px;
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0 auto;   
    align-items: center;
}

.logo{
    width: 137px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.logo .logoimage{
    width: 75px;
}
.exploreText{ 
    font-size: 10px;
    font-style: italic; 
}
.plusText{ 
    font-size: 10px; 
    margin: 0 2px; 
    text-transform: capitalize;
    font-style: italic;
    color: yellow;
  }
.logo .goldenStar{
    width: 10px;
    height: 10px;
}

.searchInputContainer {
    width: 560px;
    position: relative;
    background: #fff;
    height: 36px;
    border-radius: 1px;
    overflow: hidden;
    display: flex;
  }
.searchInput {
    width: 518px;
    border: 0;
    height: 36px;
    outline: none;
    box-sizing: border-box;
    padding: 0 10px;
  }
.searchIconContainer {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .rightMenu{
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
  }
.loginButton {
    display: block;
    width: 100px;
    height: 30px;
    background: #fff;
    text-align: center;
    line-height: 30px;
    color: #2874f0;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
  }
.more {
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    margin: 0 20px;
    cursor: pointer;
  }
.cart {
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px
  }

.authContainer{
  color: #212121;
  margin: 0 auto;
  border-radius: 2px;
  height: 528px;
  max-width: 750px;
  min-width: 650px;
}
.row{
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  height: 528px;
    max-width: 750px;
    min-width: 650px;
}

.leftspace{
  width: 40%;
  height: 100%;
  color: #fff;
  letter-spacing: 1px;
  background-image: url('../../images/login-image.png');
  background-color: #2874f0;
  background-repeat: no-repeat;
  background-position: center 85%;
  padding: 40px 33px;
  box-sizing: border-box;
}

.rightspace{
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}