hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add form to sleep timer

Browse source
This commit is contained in:
MAZE 2024-04-29 15:21:50 +04:30
parent e674738ce7
commit 9d458fb60e
1 changed files with 63 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/components/modals/sleep-timer/sleep-timer.tsx
View file

@ -69,6 +69,12 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
setRunning(false);
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
handleStart();
};
return (
<Modal show={show} onClose={onClose}>
<header className={styles.header}>
@ -78,62 +84,68 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
</p>
</header>
<div className={styles.controls}>
{!running && (
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="hours">
Hours:
</label>
<input
className={styles.input}
id="hours"
min="0"
type="number"
value={hours}
onChange={e =>
setHours(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
{!running && (
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="minutes">
Minutes:
</label>
<input
className={styles.input}
max="59"
min="0"
type="number"
value={minutes}
onChange={e =>
setMinutes(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
{running ? <Timer displayHours={true} timer={timeLeft} /> : null}
<div className={styles.buttons}>
{running && (
<button className={styles.button} onClick={handleReset}>
Reset
</button>
<form onSubmit={handleSubmit}>
<div className={styles.controls}>
{!running && (
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="hours">
Hours:
</label>
<input
className={styles.input}
id="hours"
min="0"
type="number"
value={hours}
onChange={e =>
setHours(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
{!running && (
<button
className={cn(styles.button, styles.primary)}
onClick={handleStart}
>
Save
</button>
<div className={styles.inputContainer}>
<label className={styles.label} htmlFor="minutes">
Minutes:
</label>
<input
className={styles.input}
max="59"
min="0"
type="number"
value={minutes}
onChange={e =>
setMinutes(e.target.value === '' ? '' : e.target.value)
}
/>
</div>
)}
{running ? <Timer displayHours={true} timer={timeLeft} /> : null}
<div className={styles.buttons}>
{running && (
<button
className={styles.button}
type="button"
onClick={handleReset}
>
Reset
</button>
)}
{!running && (
<button
className={cn(styles.button, styles.primary)}
type="submit"
>
Save
</button>
)}
</div>
</div>
</div>
</form>
</Modal>
);
}