Setting radioSelection

This commit is contained in:
sageTheDM 2024-10-03 16:11:53 +02:00
parent ca45d48015
commit 6435d5f4e4
2 changed files with 26 additions and 39 deletions

View file

@ -11,50 +11,38 @@ const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handl
// Set default option based on openSourceMode if no option is selected // Set default option based on openSourceMode if no option is selected
useEffect(() => { useEffect(() => {
if (!selectedOption) { if (!selectedOption) {
handleRadioChange(openSourceMode ? 'Offline' : 'None'); handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None');
} }
}, [selectedOption, handleRadioChange, openSourceMode]); }, [selectedOption, handleRadioChange, openSourceMode]);
// Handle option click, allowing all options even in open-source mode // Define your options
const handleOptionClick = (option: string) => { const options = [
handleRadioChange(option); // No restrictions on options { value: 'Online', label: 'Online' },
}; { value: 'Offline', label: 'Offline' },
{ value: 'None', label: 'None' },
{ value: 'Offline (FOSS)', label: 'Offline (FOSS)' },
{ value: 'Online (FOSS)', label: 'Online (FOSS)' },
{ value: 'None (FOSS)', label: 'None (FOSS)' },
];
return ( return (
<> <div className="settings-option">
{/* AI Mode Radio Options */} <p>Select Privacy Mode:</p>
<div className="settings-option"> {options.map((option) => (
<p>{openSourceMode ? 'Disable Options (FOSS Mode):' : 'Disable Options:'}</p> <div key={option.value}>
<div className="slider"> <label>
{/* Offline */} <input
<div type="radio"
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`} value={option.value}
onClick={() => handleOptionClick('Offline')} checked={selectedOption === option.value}
style={{ pointerEvents: (openSourceMode && selectedOption !== 'Offline') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'Offline') ? 0.5 : 1 }} onChange={() => handleRadioChange(option.value)}
> disabled={openSourceMode && !option.label.includes('(FOSS)') && selectedOption !== option.value} // Disable non-FOSS options if FOSS is selected
Offline tools{openSourceMode ? ' (FOSS)' : ''} />
</div> {option.label}
</label>
{/* Online (Available even in FOSS mode) */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleOptionClick('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleOptionClick('None')}
style={{ pointerEvents: (openSourceMode && selectedOption !== 'None') ? 'none' : 'auto', opacity: (openSourceMode && selectedOption !== 'None') ? 0.5 : 1 }}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div> </div>
<br /> ))}
</div> </div>
</>
); );
}; };

View file

@ -458,7 +458,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Privacy Settings</h2> <h2>Privacy Settings</h2>
<PrivacySettings <PrivacySettings
selectedOption={selectedOption} selectedOption={selectedOption}
handleRadioChange={handleRadioChange} handleRadioChange={handleRadioChange}