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

feat: add timer for breathing exercises

Browse source
This commit is contained in:
MAZE 2024-08-31 13:58:44 +04:30
parent b27f24d374
commit 5865fc867d
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/modals/breathing/exercise/exercise.module.css
View file

@ -10,6 +10,21 @@
border: 1px solid var(--color-neutral-200);
border-radius: 8px;
& .timer {
position: absolute;
top: 4px;
left: 4px;
padding: 4px 12px;
font-size: var(--font-xsm);
color: var(--color-foreground-subtle);
background: linear-gradient(
var(--color-neutral-100),
var(--color-neutral-50)
);
border: 1px solid var(--color-neutral-200);
border-radius: 4px;
}
& .phase {
font-family: var(--font-display);
font-size: var(--font-lg);

15
src/components/modals/breathing/exercise/exercise.tsx
View file

@ -1,5 +1,8 @@
import { useState, useEffect, useMemo, useCallback } from 'react';
import { motion } from 'framer-motion';
import { padNumber } from '@/helpers/number';
import styles from './exercise.module.css';
type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
@ -81,9 +84,21 @@ export function Exercise() {
return () => clearInterval(interval);
}, [currentPhase, durations, updatePhase]);
const [timer, setTimer] = useState(0);
useEffect(() => {
const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<div className={styles.exercise}>
<div className={styles.timer}>
{padNumber(Math.floor(timer / 60))}:{padNumber(timer % 60)}
</div>
<motion.div
animate={currentPhase}
className={styles.circle}