Timer Settings

\n \n

\n {/* Pomodoro Duration */}\n

\n \n Pomodoro Duration (minutes)\n \n handleInputChange('pomodoroMinutes', parseInt(e.target.value) || 1)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 settings-input\"\n />\n

\n The duration of each focused work session\n

\n\n {/* Short Break Duration */}\n

\n \n Short Break Duration (minutes)\n \n handleInputChange('shortBreakMinutes', parseInt(e.target.value) || 1)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 settings-input\"\n />\n

\n Short break between Pomodoro sessions\n

\n\n {/* Long Break Duration */}\n

\n \n Long Break Duration (minutes)\n \n handleInputChange('longBreakMinutes', parseInt(e.target.value) || 1)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 settings-input\"\n />\n

\n Long break after completing all sessions\n

\n\n {/* Number of Sessions */}\n

\n \n Number of Sessions\n \n handleInputChange('sessions', parseInt(e.target.value) || 1)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 settings-input\"\n />\n

\n Number of Pomodoro sessions before a long break\n

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

Preview

• {localConfig.sessions} × {localConfig.pomodoroMinutes} min work sessions

• {localConfig.sessions - 1} × {localConfig.shortBreakMinutes} min short breaks

• 1 × {localConfig.longBreakMinutes} min long break

\n Total time: ~{Math.round(\n (localConfig.pomodoroMinutes * localConfig.sessions) +\n (localConfig.shortBreakMinutes * (localConfig.sessions - 1)) +\n localConfig.longBreakMinutes\n )} minutes\n

\n\n {/* Action Buttons */}\n

\n \n Apply Changes\n \n \n \n Reset\n \n \n setShowSaveForm(!showSaveForm)}\n className=\"px-6 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-all timer-button\"\n >\n Save as Preset\n \n

\n\n {/* Save Preset Form */}\n {showSaveForm && (\n

Save as Preset

\n setPresetName(e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n onKeyPress={(e) => e.key === 'Enter' && handleSavePreset()}\n />\n \n {isSaving ? 'Saving...' : 'Save'}\n \n {\n setShowSaveForm(false);\n setPresetName('');\n }}\n className=\"px-4 py-2 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-all\"\n >\n Cancel\n \n

\n )}\n

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