YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

DropDown comments

Browse source
This commit is contained in:
sageTheDM 2024-10-11 09:29:03 +02:00
parent dc4ed59547
commit 2c867fcc3c
1 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/components/settings/DropDown.tsx
View file

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