\n Timer Name\n setName(e.target.value)}\n />\n

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

\n Duration\n \n {\n const val = e.target.value;\n setMinutes(val === \"\" ? 0 : parseInt(val) || 0);\n }}\n onFocus={(e) => e.target.select()}\n />\n \n min\n \n {\n const val = e.target.value;\n setSeconds(val === \"\" ? 0 : parseInt(val) || 0);\n }}\n onFocus={(e) => e.target.select()}\n />\n \n sec\n \n

\n \n\n {/* Alarm sound */}\n

\n Alarm Sound\n setAlarmSoundId(e.target.value)}\n >\n {ALARM_SOUNDS.map((sound) => (\n \n ))}\n \n

\n\n {/* Show Countdown toggle */}\n \n \n Show Countdown\n \n setShowCountdown(!showCountdown)}\n style={{\n width: \"51px\",\n height: \"31px\",\n borderRadius: \"16px\",\n border: \"none\",\n cursor: \"pointer\",\n background: showCountdown\n ? \"rgba(52, 199, 89, 0.9)\"\n : \"rgba(255,255,255,0.2)\",\n position: \"relative\",\n transition: \"background 0.2s ease\",\n flexShrink: 0,\n }}\n >\n \n \n \n\n {/* Start button */}\n \n Start Timer\n \n \n \n );\n}\n","deleted","label",[176,177,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/sundays/code/frontend/components/TimerCreate.tsx","extension","actionData","errors"]