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 53 54 55 56 57 58 59 60 61 62 63 | 7x 7x 1x 1x 1x 1x 7x | import { useContext } from "react";
import { ChallengeContext } from "../contexts/ChallengeContext";
import { CountdownContext } from "../contexts/CountdownContext";
import styles from "../styles/components/ChallengeBox.module.css";
export function ChallengeBox() {
const { activeChallenge, resetChallenge, completeChallenge } =
useContext(ChallengeContext);
const { stopCountdown } = useContext(CountdownContext);
function handleChallengeSucceeded() {
completeChallenge();
stopCountdown();
}
function handleChallengeFailed() {
resetChallenge();
stopCountdown();
}
return (
<div className={styles.challengeBoxContainer}>
{activeChallenge ? (
<div className={styles.challengeActive}>
<header>Ganhe {activeChallenge.amount} xp</header>
<main>
<img src={`icons/${activeChallenge.type}.svg`} alt="" />
<strong>Novo desafio</strong>
<p>{activeChallenge.description}</p>
</main>
<footer>
<button
type="button"
onClick={handleChallengeFailed}
className={styles.challengeFailedButton}
>
Falhei
</button>
<button
type="button"
onClick={handleChallengeSucceeded}
className={styles.challengeSucceededButton}
>
Completei
</button>
</footer>
</div>
) : (
<div className={styles.challengeNotActive}>
<strong>
Inicie um ciclo para receber desafios a serem completados
</strong>
<p>
<img src="icons/level-up.svg" alt="Level Up" />
Avance de level completando desafios.
</p>
</div>
)}
</div>
);
}
|