forked from React-Group/interstellar_ai
29 lines
899 B
TypeScript
29 lines
899 B
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
interface TextSettingProps {
|
||
|
|
label: string; // The label to display
|
||
|
|
value: string; // The current text value
|
||
|
|
setValue: (newText: string) => void; // The method to update the state
|
||
|
|
type: 'text' | 'email' | 'password'; // The type of input field
|
||
|
|
}
|
||
|
|
|
||
|
|
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
|
||
|
|
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const newText = e.target.value; // Get the new value from the input
|
||
|
|
setValue(newText); // Update the state in the parent component
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="settings-option">
|
||
|
|
<label>{label}</label>
|
||
|
|
<input
|
||
|
|
type={type} // Use the type prop for the input
|
||
|
|
value={value} // Set the current value
|
||
|
|
onChange={handleTextChange} // Handle input changes
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TextSetting;
|