Flipkart Like Menu with dropdown | ReactJS Component | WebScript

import React 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';

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

const DropdownMenu = (props) => {
  return (
    <div className="headerDropdownContainer">
      {props.menu}
      <div className="dropdown">
        <div className="upArrow"></div>
        {props.firstMenu}
        <ul className="headerDropdownMenu">
          {
            props.menus && props.menus.map((item, index) =>
              <li key={index}><a href={item.href}>{item.label}</a></li>
            )
          }
        </ul>
      </div>
    </div>
  );
}

const Header = (props) => {
  return (
    <div className="header">
      <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">
                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
  }
  .headerDropdownContainer{
    position: relative;
    display: inline-block;
  }
  .firstmenu{
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
  }
.dropdown{
  right: 50%;
  position: absolute;
  width: 240px;
  background: #fff;
  transform: translateX(50%);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.2);
  border-radius: 2px;
  z-index: 1;
  margin-top: 12px;
  display: none;
}
.headerDropdownContainer:hover .dropdown{
  display: block;
}
.upArrow{
  width: 0;
  height: 0;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.headerDropdownMenu{
  margin: 0;
  padding: 0;
}
.headerDropdownMenu li{
  list-style: none;
}
.headerDropdownMenu li a{
  display: block;
  padding: 15px 20px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  color: #212121;
  text-decoration: none;
}
.headerDropdownMenu li a:hover{
  background-color: #f0f0f0;
  cursor: pointer;
}