import React from 'react'; interface Option { value: string; // The actual value to be used label: string; // The label to display for the option } interface DropdownSettingProps { label: string; // The label to display value: string; // The current selected value setValue: (newValue: string) => void; // The method to update the state options: Option[]; // List of options for the dropdown } const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => { const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => { const newValue = e.target.value; setValue(newValue); }; return ( <div className="settings-option"> <label>{label}</label> <select value={value} onChange={handleSelectChange}> {options.map((option) => ( <option key={option.value} value={option.value}> {option.label} </option> ))} </select> </div> ); }; export default DropdownSetting;