implementaçao das rotas

src/components/Countdown/index.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react';
-import useChallenge from '../../hooks/useChallenge';
 import useCountdown from '../../hooks/useCountdown';
 import styles from './styles.module.scss';
 
 export default function Countdown(){
- const { currentChallenge } = useChallenge();
- const { hasFinish, seconds, minutes , isActive, startCountdown, resetCountdown } = useCountdown();
- const [minuteLeft, minuteRight] = minutes.toString().padStart(2,'0').split('');
- const [secondLeft, secondRight] = seconds.toString().padStart(2,'0').split('');
+ const { hasFinish, progress, seconds, minutes , isActive, startCountdown, resetCountdown } = useCountdown();
+ const [ minuteLeft, minuteRight ] = minutes.toString().padStart(2,'0').split('');
+ const [ secondLeft, secondRight ] = seconds.toString().padStart(2,'0').split('');
 
  return(
  <div>
@@ -25,29 +23,46 @@ export default function Countdown(){
  </div>
 
  { hasFinish? 
- (<button
- disabled
- className={styles.startCountdownButton}
- >
- <span>Ciclo encerrado</span>
- </button>)
+ (
+ <>
+ <button
+ disabled
+ className={styles.startCountdownButton}
+ >
+ <span>Ciclo encerrado</span>
+ <img src="/icons/done.svg" alt="done" />
+ </button>
+ <div className={styles.progressBarButton}>
+ <div style={{width: `100%`}}/>
+ </div>
+ </>
+ )
  : 
  isActive? 
- (<button 
- onClick={resetCountdown}
- type="button" 
- className={`${styles.startCountdownButton} ${styles.startCountdownButtonActive}`}
- >
- <span>Abandonar um ciclo</span>
-
- </button>)
- :
- (<button 
+ (
+ <>
+ <button 
+ onClick={resetCountdown}
+ type="button" 
+ className={`${styles.startCountdownButton} ${styles.startCountdownButtonActive}`}
+ >
+ <span>Abandonar um ciclo</span>
+ <img src="/icons/close.svg" className="close" alt="close" />
+ </button>
+ <div className={styles.progressBarButton}>
+ <div style={{width: `${progress}%`}}/>
+ </div>
+ </>
+ ):(
+ <button 
  onClick={startCountdown}
  type="button" 
  className={styles.startCountdownButton}
  >
- Iniciar um ciclo
+ <span>
+ Iniciar um ciclo
+ </span>
+ <img src="/icons/play.svg" alt="play" />
  </button>)
  }
 

src/components/Countdown/styles.module.scss

@@ -47,7 +47,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
- gap: 1rem;
+ gap: 0.4rem;
 
  border: 0;
  border-radius: 5px;
@@ -61,6 +61,7 @@
  img {
  width: 1rem;
  height: 1rem;
+ font-size: 0;
  }
 
  transition: background-color 0.2s;
@@ -78,12 +79,31 @@
  &.startCountdownButtonActive {
  background-color: var(--white);
  color: var(--title);
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
 
  &:not(:disabled):hover {
  background-color: var(--red);
  color: var(--white);
  }
+ /* img {
+ width: 2.2rem;
+ height: 2.2rem; 
+ font-size: 0; 
+ } */
  }
 }
 
 
+.progressBarButton {
+ height: 0.4rem;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background: var(--gray-line);
+ overflow: hidden;
+
+ > div {
+ background: var(--green);
+ height: inherit;
+ }
+}

src/components/NavBar/index.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { useState } from 'react';
+import styles from './styles.module.scss';
+
+export function NavBar(){
+ const [ selectedPage, setSelectedPage ] = useState('home');
+
+ return(
+
+ <nav className={styles.nav}>
+ <img src="/icons/small-logo.svg" alt="logo" />
+
+ <div>
+ <Link href="/">
+ <div className={selectedPage === 'home'? styles.selected : ''} onClick={()=>setSelectedPage('home')}>
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http:https://www.w3.org/2000/svg">
+ <path d="M4 12L16 2.66663L28 12V26.6666C28 27.3739 27.719 28.0522 27.219 28.5522C26.7189 29.0523 26.0406 29.3333 25.3333 29.3333H6.66667C5.95942 29.3333 5.28115 29.0523 4.78105 28.5522C4.28095 28.0522 4 27.3739 4 26.6666V12Z" stroke={selectedPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M12 29.3333V16H20V29.3333" stroke={selectedPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ </svg>
+ </div>
+ </Link>
+
+ <Link href="/ranking">
+ <div className={selectedPage === 'ranking'? styles.selected : ''} onClick={()=>setSelectedPage('ranking')}>
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http:https://www.w3.org/2000/svg">
+ <g>
+ <path d="M16.0001 20C21.1547 20 25.3334 15.8214 25.3334 10.6667C25.3334 5.51205 21.1547 1.33337 16.0001 1.33337C10.8454 1.33337 6.66675 5.51205 6.66675 10.6667C6.66675 15.8214 10.8454 20 16.0001 20Z" stroke={selectedPage === 'ranking'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M10.9466 18.52L9.33325 30.6667L15.9999 26.6667L22.6666 30.6667L21.0533 18.5067" stroke={selectedPage === 'ranking'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ </g>
+ </svg>
+ </div>
+ </Link>
+
+ </div>
+ </nav>
+ );
+}

src/components/NavBar/styles.module.scss

@@ -0,0 +1,62 @@
+
+.nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 6rem;
+ background: var(--white);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ img {
+ padding: 1rem;
+ height: 4.5rem;
+ width: 4.5rem;
+ }
+
+ > div {
+ height: 100%;
+ width: 100%;
+ gap: 2rem; 
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+
+ > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ cursor: pointer;
+
+ &.selected::before {
+ content: " ";
+ display: inline-block;
+ width: 0.3rem;
+ height: 3rem;
+ background: var(--blue);
+ position: absolute;
+ left: 0;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 800px){
+ .nav {
+ width: 100vw;
+ height: 6rem;
+
+ flex-direction: row;
+ > div {
+ flex-direction: row;
+ }
+ }
+}

src/context/ChallengeContext.tsx

@@ -46,9 +46,9 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  }, [])
 
  useEffect(() => {
- Cookies.set('level', String(level));
- Cookies.set('currentXP', String(currentXP));
- Cookies.set('challengesCompleted', String(challengesCompleted));
+ Cookies.set('level', String(level),{sameSite:'strict'});
+ Cookies.set('currentXP', String(currentXP),{sameSite:'strict'});
+ Cookies.set('challengesCompleted', String(challengesCompleted),{sameSite:'strict'});
 
  }, [level, currentXP, challengesCompleted])
 
@@ -73,6 +73,7 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
 
  function resetChallenge(){
  setCurrentChallenge(null);
+
  }
 
  function completeChallenge(){

src/context/CountdownContext.tsx

@@ -2,8 +2,10 @@ import { ReactNode, createContext, useState, useEffect } from "react"
 import useChallenge from "../hooks/useChallenge";
 
 type CountdownContextProviderProps = {
+ time: number;
  minutes: number;
  seconds: number;
+ progress: number;
  isActive: boolean;
  hasFinish: boolean;
  startCountdown:()=>void;
@@ -17,10 +19,12 @@ const CountdownContext = createContext({} as CountdownContextProviderProps);
 
 function CountdownContextProvider({children}:Record<string,ReactNode>){
 
- const { startNewChallenge, currentChallenge } = useChallenge();
- const [time, setTime] = useState(0.05 * 60);
- const [isActive, setIsActive] = useState(false);
- const [hasFinish, setHasFinish] = useState(false);
+ const { startNewChallenge } = useChallenge();
+ const [ time, setTime ] = useState(0.5 * 60);
+ const [ isActive, setIsActive ] = useState(false);
+ const [ hasFinish, setHasFinish ] = useState(false);
+ const [ initialTime, setInitialTime ] = useState(time);
+ const progress = (( initialTime - time) * 100) / initialTime;
 
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
@@ -31,29 +35,33 @@ function CountdownContextProvider({children}:Record<string,ReactNode>){
 
  function resetCountdown(){ 
  clearTimeout(countdownTimeout);
- setIsActive(false);
- setTime(0.1 * 60);
  setHasFinish(false);
+ setIsActive(false);
+ setTime(25 * 60);
+ setInitialTime(25 * 60);
  }
 
  useEffect(() => {
  if(isActive && time > 0){
  countdownTimeout = setTimeout(()=>{
- setTime(time-1)
+ setTime(time-1);
  },1000)
 
  }else if(isActive && time===0){
+ clearTimeout(countdownTimeout);
  setHasFinish(true);
  setIsActive(false);
  startNewChallenge();
-
  }
+
  }, [isActive, time]);
 
  return(
  <CountdownContext.Provider value={{
+ time,
  minutes,
  seconds,
+ progress,
  isActive,
  hasFinish,
  resetCountdown,

src/pages/_app.tsx

@@ -1,10 +1,13 @@
-import { ChallengeContextProvider } from '../context/ChallengeContext';
+import { NavBar } from '../components/NavBar';
 import '../styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
  return(
- <Component {...pageProps} />
- ) 
+ <>
+ <NavBar />
+ <Component {...pageProps} />
+ </>
+ ) 
 }
 
 export default MyApp

src/pages/_document.tsx

@@ -4,8 +4,8 @@ export default class MyDocument extends Document{
 render(){
  return(
  <Html>
-  <Head>
-  <link rel="shortcut icon" href="favicon.png" type="image/png" />
+ <Head>
+ <link rel="shortcut icon" href="favicon.png" type="image/png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com"/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Rajdhani:wght@600&display=swap" rel="stylesheet" /> 

src/pages/index.tsx

@@ -8,7 +8,6 @@ import Head from 'next/head';
 import styles from '../styles/pages/Home.module.scss';
 import { CountdownContextProvider } from '../context/CountdownContext';
 import { GetServerSideProps } from 'next';
-import Cookies from 'js-cookie';
 import { ChallengeContextProvider } from '../context/ChallengeContext';
 
 type HomeProps = {

src/pages/ranking/index.tsx

@@ -0,0 +1,7 @@
+export default function Ranking(){
+ return(
+ <div className="container">
+ <h1>ranking</h1>
+ </div>
+ );
+}

src/styles/globals.scss

@@ -45,4 +45,5 @@ a {
 
  display: flex;
  flex-direction: column;
-}
+}
+