Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 8x 8x 8x 8x | import { useContext } from "react";
import styles from "../styles/components/Countdown.module.css";
import { CountdownContext } from "../contexts/CountdownContext";
export default function Countdown() {
const {
hasFinished,
isActive,
minutes,
seconds,
startCountdown,
stopCountdown,
} = useContext(CountdownContext);
const [minuteL, minuteR] = String(minutes).padStart(2, "0").split("");
const [secondL, secondR] = String(seconds).padStart(2, "0").split("");
return (
<div>
<div className={styles.countdown}>
<div>
<span>{minuteL}</span>
<span>{minuteR}</span>
</div>
<span>:</span>
<div>
<span>{secondL}</span>
<span>{secondR}</span>
</div>
</div>
{hasFinished ? (
<button disabled className={styles.start}>
Ciclo terminou
</button>
) : isActive ? (
<button
onClick={stopCountdown}
type="button"
className={`${styles.start} ${styles.active}`}
>
Abandonar ciclo
</button>
) : (
<button onClick={startCountdown} type="button" className={styles.start}>
Iniciar um ciclo
</button>
)}
</div>
);
}
|