Single Select

import '@cometchat/uikit-elements';//import the web component package.
import { SingleSelectStyle } from '@cometchat/uikit-elements'
function App() {
  // Define the styles
  const selectStyle = new SingleSelectStyle({
    height: "40px",
    width: "200px",
    background: "lightgrey",
    textFont: '600 14px Inter, sans-serif',
    textColor: 'grey',
    optionBackground: 'white',
    optionBorder: '1px solid grey',
    optionBorderRadius: '4px',
    hoverTextFont: '600 14px Inter, sans-serif',
    hoverTextColor: 'black',
    hoverTextBackground: 'lightgrey',
    activeTextBackground: 'darkgrey',
    activeTextColor: 'white',
    activeTextFont: '600 14px Inter, sans-serif'
  });

  // Define the event handler
  const handleOptionChange = (event) => {
    console.log('Selected option: ', event.detail.value);
  }

  return (
    <div className="App">
      <cometchat-single-select
        name="mySingleSelect" 
        options='["Option 1", "Option 2", "Option 3"]' 
        selectedOption="Option 1"
        selectStyle=${selectStyle}
        @cc-single-select-changed=${handleOptionChange}
      ></cometchat-single-select>
    </div>
  );
}

export default App;