interstellar_ai/app/components/settings/DropDownTheme.tsx

42 lines
1.5 KiB
TypeScript
Raw Normal View History

2024-10-07 09:09:15 +02:00
// ThemeDropdown.tsx
import React from 'react';
2024-10-01 12:45:21 +02:00
2024-10-07 09:09:15 +02:00
const ThemeDropdown: React.FC<{
selectedTheme: string; // Currently selected theme
setSelectedTheme: (theme: string) => void; // Function to update the selected theme
2024-10-07 09:09:15 +02:00
}> = ({ selectedTheme, setSelectedTheme }) => {
// Define available theme options
2024-10-07 09:09:15 +02:00
const themeOptions = [
{ value: 'IOMARKET', label: 'IOMARKET' },
{ value: 'WHITE', label: 'WHITE' },
{ value: 'BLACK', label: 'BLACK' },
{ value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
{ value: 'CUSTOM', label: 'CUSTOM' },
];
2024-10-01 12:45:21 +02:00
2024-10-07 09:09:15 +02:00
return (
<div className="settings-option"> {/* Container for the dropdown */}
<p>Select Theme</p> {/* Label for the dropdown */}
2024-10-07 09:09:15 +02:00
<select
value={selectedTheme} // Current selected theme
onChange={(e) => { // Handler for dropdown changes
const theme = e.target.value; // Get the selected value
2024-10-07 11:16:51 +02:00
if (theme !== 'default' && typeof localStorage !== 'undefined') {
setSelectedTheme(theme); // Update the selected theme state
localStorage.setItem('selectedTheme', theme); // Save the theme to localStorage
2024-10-07 09:09:15 +02:00
}
}}
>
<option value="default">Select your style...</option> {/* Default option */}
{themeOptions.map((option) => ( // Map through theme options to create <option> elements
2024-10-07 09:09:15 +02:00
<option key={option.value} value={option.value}>
{option.label} {/* Display the label for the option */}
2024-10-07 09:09:15 +02:00
</option>
))}
</select>
</div>
);
};
2024-10-01 12:45:21 +02:00
2024-10-07 09:09:15 +02:00
export default ThemeDropdown;