hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 01:14:17 +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); setRunning(false);
}; };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
handleStart();
};
return ( return (
<Modal show={show} onClose={onClose}> <Modal show={show} onClose={onClose}>
<header className={styles.header}> <header className={styles.header}>
@ -78,62 +84,68 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
</p> </p>
</header> </header>
<div className={styles.controls}> <form onSubmit={handleSubmit}>
{!running && ( <div className={styles.controls}>
<div className={styles.inputContainer}> {!running && (
<label className={styles.label} htmlFor="hours"> <div className={styles.inputContainer}>
Hours: <label className={styles.label} htmlFor="hours">
</label> Hours:
<input </label>
className={styles.input} <input
id="hours" className={styles.input}
min="0" id="hours"
type="number" min="0"
value={hours} type="number"
onChange={e => value={hours}
setHours(e.target.value === '' ? '' : e.target.value) onChange={e =>
} setHours(e.target.value === '' ? '' : e.target.value)
/> }
</div> />
)} </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>
)} )}
{!running && ( {!running && (
<button <div className={styles.inputContainer}>
className={cn(styles.button, styles.primary)} <label className={styles.label} htmlFor="minutes">
onClick={handleStart} Minutes:
> </label>
Save <input
</button> 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>
</div> </form>
</Modal> </Modal>
); );
} }