feat: create progress bar

src/components/Progress.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+
+type Props = React.ProgressHTMLAttributes<any>
+
+const Progress = (props: Props) => {
+  return <Container {...props} />
+}
+
+export default Progress
+
+const Container = styled.progress`
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 6px;
+
+  border-radius: 6px;
+
+  box-shadow: 0px 2px 5px rgba(49, 216, 179, 0.35);
+
+  ::-webkit-progress-bar {
+    background-color: ${({ theme }) => theme.colors.gray200};
+    border-radius: 6px;
+  }
+  ::-webkit-progress-value {
+    background-color: ${({ theme }) => theme.colors.gray300};
+
+    transition: width 0.8s ease;
+  }
+`

src/contexts/QuestionsContext.tsx

@@ -14,7 +14,7 @@ type AnswerQuestion = (questionId: string, answer: number) => void
 interface AuthContextData {
   questions: Questions
   questionsAnswers: QuestionsAnswers
-  isLoading: boolean
+  loading: boolean
   answerQuestion: AnswerQuestion
 }
 
@@ -27,14 +27,14 @@ const questionsRepository = new QuestionsRepository()
 const QuestionsContext = createContext<AuthContextData>({
   questions: [],
   questionsAnswers: [],
-  isLoading: true,
+  loading: true,
   answerQuestion: () => undefined
 })
 
 export const QuestionsProvider = ({ children }: AuthProviderProps) => {
   const [questions, setQuestions] = useState<Questions>([])
   const [questionsAnswers, setQuestionsAnswers] = useState<QuestionsAnswers>([])
-  const [isLoading, setIsLoading] = useState(true)
+  const [loading, setLoading] = useState(true)
 
   const answerQuestion: AnswerQuestion = (questionId, answer) => {
     setQuestionsAnswers([
@@ -53,7 +53,7 @@ export const QuestionsProvider = ({ children }: AuthProviderProps) => {
     } catch {
       Router.push('/')
     } finally {
-      setIsLoading(false)
+      setLoading(false)
     }
   }
 
@@ -66,7 +66,7 @@ export const QuestionsProvider = ({ children }: AuthProviderProps) => {
       value={{
         questions,
         questionsAnswers,
-        isLoading,
+        loading,
         answerQuestion
       }}
     >

src/pages/questions/index.tsx

@@ -1,50 +1,60 @@
 import styled from 'styled-components'
 
-import Ranger from 'components/Ranger'
 import Title from 'components/Title'
+import Progress from 'components/Progress'
+import Ranger from 'components/Ranger'
 
 import { useQuestions } from 'contexts/QuestionsContext'
 
 import type { NextPage } from 'next'
 
 const QuestionsPage: NextPage = () => {
-  const { questions, answerQuestion } = useQuestions()
+  const { loading, questions, questionsAnswers, answerQuestion } =
+    useQuestions()
 
   return (
     <Container>
-      {questions.map((question, i) => (
-        <Wrapper key={question.id}>
-          <Question>
-            <Title tag='h2'>
-              {i + 1}. {question.category.name}
-            </Title>
-
-            <Title tag='h3' style={{ margin: '30px 0 110px 0' }}>
-              {question.title}
-            </Title>
-
-            <Ranger
-              key={question.id}
-              optionsSize={3}
-              side='both'
-              onSelect={(answer) => answerQuestion(question.id, answer)}
-            />
-          </Question>
-        </Wrapper>
-      ))}
+      <Progress value={questionsAnswers.length / questions.length} />
+
+      {loading ? (
+        <Title tag='h1'>me contrata pfvr :)</Title>
+      ) : (
+        questions.map((question, i) => (
+          <Wrapper key={question.id}>
+            <Question>
+              <Title tag='h2'>
+                {i + 1}. {question.category.name}
+              </Title>
+
+              <Title tag='h3' style={{ margin: '30px 0 110px 0' }}>
+                {question.title}
+              </Title>
+
+              <Ranger
+                key={question.id}
+                optionsSize={3}
+                side='both'
+                onSelect={(answer) => answerQuestion(question.id, answer)}
+              />
+            </Question>
+          </Wrapper>
+        ))
+      )}
     </Container>
   )
 }
 
 export default QuestionsPage
 
-const Container = styled.main``
+const Container = styled.main`
+  position: relative;
+
+  padding: 42px 32px;
+`
 
 const Question = styled.div`
   display: flex;
   flex-direction: column;
-
-  padding: 48px 32px;
 `
 
 const Wrapper = styled.div`

src/styles/global.ts

@@ -13,15 +13,13 @@ export default createGlobalStyle`
     }
 
     &::-webkit-scrollbar-track {
-      border-radius: 8px;
       background-color: transparent;
     }
     &::-webkit-scrollbar {
-      width: 8px;
+      width: 6px;
       background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-      border-radius: 8px;
       background-color: #c4c4c4;
     }
   }