React Dropdown with Images

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
    const options = [
      { label: 'John Andrew', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754246bird-g8b2ad9bcc_640.jpg' },
      { label: 'Mr. Bob', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754273bird-gda5461bb5_640.jpg' },
      { label: 'Jimmy Charlie', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754293lily-g661b596df_640.jpg' },
      { label: 'David', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754318flower-gf39467e8f_640.jpg' },
      { label: 'Emily', image: 'https://www.sarkarinaukriexams.com/images/editor/1691754338influencer-g28b2a2f55_640.jpg' },
      { label: 'Frank', image: 'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg' },
    ];

const App = () => {
      const [isDropdownOpen, setIsDropdownOpen] = useState(false);
      const [selectedOption, setSelectedOption] = useState(null);

const toggleDropdown = () => {
        setIsDropdownOpen(!isDropdownOpen);
      };

const selectOption = (option) => {
        setSelectedOption(option);
        setIsDropdownOpen(false);
      };

return (
        <div className='container'>
          <h3>React Js Dropdown with Image</h3>
          <p>Selected Value: {selectedOption ? selectedOption.label : ''}</p>
          <div className="dropdown">
            <div className="dropdown-toggle" onClick={toggleDropdown}>
              {selectedOption && (
                <img src={selectedOption.image} alt={selectedOption.label} className="dropdown-option-image" />
              )}
              <span className="dropdown-option-label">
                {selectedOption ? selectedOption.label : 'Select an option'}
              </span>
              <span className="dropdown-caret"></span>
            </div>
            <ul className={`dropdown-menu ${isDropdownOpen ? 'open' : ''}`}>
              {options.map((option, index) => (
                <li key={index} onClick={() => selectOption(option)}>
                  <img src={option.image} alt={option.label} className="dropdown-option-image" />
                  <span className="dropdown-option-label">{option.label}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      );
    };

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    /* General styles */
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }

/* Dropdown styles */
    .dropdown {
      position: relative;
      display: inline-block;
    }

.dropdown-toggle {
      display: flex;
      align-items: center;
      padding: 12px;
      background-color: #ffffff;
      border: 1px solid #ccc;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
      border-radius: 4px;
    }

.dropdown-toggle:hover {
      background-color: #f8f8f8;
    }

.dropdown-option-image {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      border-radius: 50%;
    }

.dropdown-option-label {
      flex-grow: 1;
      font-weight: bold;
    }

.dropdown-caret {
      display: inline-block;
      margin-left: 12px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 8px 0 8px;
      border-color: #999 transparent transparent transparent;
    }

.dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      margin: 0;
      padding: 12px 0;
      background-color: #fff;
      border: 1px solid #ccc;
      border-top: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      list-style: none;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      max-height: 200px;
      overflow-y: auto;
      border-radius: 4px;
    }

.dropdown-menu.open {
      opacity: 1;
      visibility: visible;
    }

.dropdown-menu li {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

.dropdown-menu li:hover {
      background-color: #f8f8f8;
    }

.dropdown-menu li .dropdown-option-image {
      margin-right: 12px;
    }

.dropdown-menu li .dropdown-option-label {
      flex-grow: 1;
      font-weight: bold;
    }

/* Centering the dropdown */
    .dropdown.open .dropdown-menu {
      transform: translateY(0);
    }

/* Adjust dropdown width */
    .dropdown.open .dropdown-toggle {
      border-radius: 4px 4px 0 0;
      border-bottom: none;
    }

.dropdown.open .dropdown-menu {
      border-radius: 0 0 4px 4px;
      border-top: none;
    }
  </style>
</body>

</html>