interstellar_ai/app/components/settings/DropDown.tsx

40 lines
1.6 KiB
TypeScript
Raw Permalink Normal View History

2024-10-01 12:45:21 +02:00
import React from 'react';
// Define the structure of each option in the dropdown
2024-10-01 12:45:21 +02:00
interface Option {
value: string; // The actual value to be used
label: string; // The label to display for the option
2024-10-01 12:45:21 +02:00
}
// Define the props for the DropdownSetting component
2024-10-01 12:45:21 +02:00
interface DropdownSettingProps {
label: string; // The label to display above the dropdown
value: string; // The currently selected value
setValue: (newValue: string) => void; // Method to update the state with the new value
options: Option[]; // List of options for the dropdown
2024-10-01 12:45:21 +02:00
}
// Functional component definition
2024-10-01 12:45:21 +02:00
const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
// Handler to change the selected option
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newValue = e.target.value; // Get the new selected value
setValue(newValue); // Update the state with the new value
};
2024-10-01 12:45:21 +02:00
return (
<div className="settings-option"> {/* Container for the dropdown setting */}
<label>{label}</label> {/* Display the label */}
<select value={value} onChange={handleSelectChange}> {/* Dropdown selection */}
{options.map((option) => ( // Map through options to create <option> elements
<option key={option.value} value={option.value}>
{option.label} {/* Display the label for the option */}
</option>
))}
</select>
</div>
);
2024-10-01 12:45:21 +02:00
};
export default DropdownSetting;