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

DropDownTheme comments

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

25
app/components/settings/DropDownTheme.tsx
View file

@ -2,9 +2,10 @@
import React from 'react'; import React from 'react';
const ThemeDropdown: React.FC<{ const ThemeDropdown: React.FC<{
selectedTheme: string; selectedTheme: string; // Currently selected theme
setSelectedTheme: (theme: string) => void; setSelectedTheme: (theme: string) => void; // Function to update the selected theme
}> = ({ selectedTheme, setSelectedTheme }) => { }> = ({ selectedTheme, setSelectedTheme }) => {
// Define available theme options
const themeOptions = [ const themeOptions = [
{ value: 'IOMARKET', label: 'IOMARKET' }, { value: 'IOMARKET', label: 'IOMARKET' },
{ value: 'WHITE', label: 'WHITE' }, { value: 'WHITE', label: 'WHITE' },
@ -14,22 +15,22 @@ const ThemeDropdown: React.FC<{
]; ];
return ( return (
<div className="settings-option"> <div className="settings-option"> {/* Container for the dropdown */}
<p>Select Theme</p> <p>Select Theme</p> {/* Label for the dropdown */}
<select <select
value={selectedTheme} value={selectedTheme} // Current selected theme
onChange={(e) => { onChange={(e) => { // Handler for dropdown changes
const theme = e.target.value; const theme = e.target.value; // Get the selected value
if (theme !== 'default' && typeof localStorage !== 'undefined') { if (theme !== 'default' && typeof localStorage !== 'undefined') {
setSelectedTheme(theme); setSelectedTheme(theme); // Update the selected theme state
localStorage.setItem('selectedTheme', theme); localStorage.setItem('selectedTheme', theme); // Save the theme to localStorage
} }
}} }}
> >
<option value="default">Select your style...</option> <option value="default">Select your style...</option> {/* Default option */}
{themeOptions.map((option) => ( {themeOptions.map((option) => ( // Map through theme 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>