\n {/* Header */}\n

Settings

\n \n \n \n

\n\n {/* Content */}\n

\n {/* Theme Selection */}\n

\n Color Theme\n

\n {themes.map((themeOption) => (\n onThemeChange(themeOption.id)}\n className={`w-full p-3 rounded-lg border text-left transition-colors ${\n theme === themeOption.id\n ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 darker:bg-blue-900/30'\n : 'border-gray-200 dark:border-gray-700 darker:border-gray-800 hover:border-gray-300 dark:hover:border-gray-600 darker:hover:border-gray-700'\n }`}\n >\n

\n {themeOption.name}\n

\n {themeOption.description}\n

\n {theme === themeOption.id && (\n \n )}\n

\n \n ))}\n

\n\n {/* Theme Preview */}\n

\n Preview\n

\n Sample Interface\n

\n This is how your interface will look with the selected theme.\n

\n\n {/* Additional Settings */}\n

\n Interface\n

\n \n \n \n Show tool tooltips\n \n \n \n \n \n Enable keyboard shortcuts\n \n \n \n \n \n Auto-save projects\n \n \n

\n\n {/* Footer */}\n

\n \n Close\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/amadesclaire/pixelart/code/frontend/components/SettingsModal.tsx","extension","actionData","errors"]