Ranking

src/components/MemberStatistics/styles.ts

@@ -8,8 +8,8 @@ interface IProgressArea {
 export const Links = styled.div`
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 2.4rem 0;
+  margin-top: 2.4rem;
+
   a {
     font-size: 1.6rem;
     color: ${({ theme }) => theme.colors.links};
@@ -23,27 +23,38 @@ export const Links = styled.div`
 `
 export const Box = styled.div`
   margin-top: 1.6rem;
-  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+
   background: ${({ theme }) => theme.colors.inputBackground};
   padding: 1.6rem;
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+ border-radius: 5px;
+ & {
+    background: ${props => props.theme.colors.backgorudElevation};
+  }
+
+  }
   > aside {
     display: flex;
     justify-content: space-between;
     align-items: center;
+
   }
   strong,
   span {
     font-size: 1.6rem;
+    align-items: center;
+
+
   }
   strong {
     font-weight: 00;
   }
   span {
     font-weight: 400;
   }
+
 `
 export const ProgressArea = styled.div<IProgressArea>`
   --CanvasSize: ${props => props.canvasSize}px;
@@ -113,6 +124,7 @@ export const ProgressArea = styled.div<IProgressArea>`
 `
 export const Statistics = styled.div`
   > figure {
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/MembersHome/index.tsx

@@ -41,22 +41,22 @@ const MembersHome: React.FC<MemberProps> = ({ members }) => {
 
   return (
     <MemberStyle>
-      <img src={currentMember.avatar} />
+      <img src={currentMember?.avatar} />
       <main>
         <section>
-          <p>{currentMember.name}</p>
-          <label>{currentMember.role ? currentMember.role.job : ''}</label>
+          <p>{currentMember?.name}</p>
+          <label>{currentMember?.role ? currentMember?.role.job : ''}</label>
         </section>
         <aside>
           <FaCaretLeft onClick={handlePreviousMember} />
           <FaCaretRight onClick={handleNextMember} />
         </aside>
         <Links>
-          <a href={currentMember.link_github}>
+          <a href={currentMember?.link_github}>
             <FaGithub />
           </a>
 
-          <a href={currentMember.link_linkedin}>
+          <a href={currentMember?.link_linkedin}>
             <FaLinkedin />
           </a>
         </Links>

src/components/Select/styles.ts

@@ -16,6 +16,9 @@ export const Container = styled.div<SelectProps>`
   padding-left: 0.8rem;
   border-radius: ${props => props.theme.variables.borderRadius}rem;
   background: ${props => props.theme.colors.inputBackground};
+  &:nth-child(odd) {
+    background: ${props => props.theme.colors.backgorudElevation};
+  }
 
   & + div {
     margin-top: 2.4rem;

src/pages/conquistas.tsx

@@ -0,0 +1,63 @@
+import SortableTable from '@/components/SortableTable'
+import MemberStatistics from '@/components/MemberStatistics'
+import { IMembersStatistics } from '@/components/MemberStatistics/interfaces'
+import { Container } from '@/styles/pages/Ranking'
+import { GetServerSideProps, GetStaticPaths, GetStaticProps } from 'next'
+import api from '@/services/api'
+import { useRouter } from 'next/router'
+import { Fragment } from 'react'
+
+interface IConquistasProps{
+  id: string
+  emoji: string
+  title: string
+  description: string
+  reward: string
+}
+interface IAchievementProps {
+    achievementsList: IConquistasProps[]
+}
+
+const Conquistas: React.FC<IAchievementProps> = ({ achievementsList }) => {
+  console.log(achievementsList)
+  return (
+    <Container>
+        <main>
+            <h3>Conquistas</h3>
+            <SortableTable
+            columnHeaders={[
+                { title: 'Emblema' , sortable: false},
+                { title: 'Conquista' },
+                { title: 'Descrição', },
+                { title: 'Recompensa' },
+            ]}
+            >
+            {achievementsList.map(achievement => (
+                <tr>
+                <td>{achievement.emoji}</td>
+                <td>{achievement.title}</td>
+                <td>{achievement.description}</td>
+                <td>{achievement.reward}</td>
+                </tr>
+            ))}
+            </SortableTable>
+
+        </main>
+
+    </Container>
+  )
+}
+
+
+export const getServerSideProps: GetServerSideProps = async context => {
+  console.log('teste')
+  const { data: achievementsList } = await api.get('/achievements')
+  console.log(achievementsList)
+  return {
+    props: {
+        achievementsList
+    } 
+  }
+}
+
+export default Conquistas

src/pages/pontos.tsx

@@ -0,0 +1,104 @@
+import SortableTable from '@/components/SortableTable'
+import { Container } from '@/styles/pages/Ranking'
+import { GetServerSideProps, GetStaticPaths, GetStaticProps } from 'next'
+import api from '@/services/api'
+import { Multiply } from '../styles/pages/Pontos'
+interface IPontosProps{
+  id: string
+  points: string
+  description: string
+  is_multipliable: string
+}
+interface IPointsProps {
+    pointsList: IPontosProps[]
+}
+
+interface IDataProps {
+    multiplier: string
+    difficulty: string
+    color: string
+  }
+
+const MultiplyPoints: React.FC<IDataProps> = ({
+    multiplier,
+    difficulty,
+    color
+  }) => {
+    return (
+      <Multiply jagunso = {color}>
+          <h3>
+            {multiplier + 'X'}
+          </h3>
+          <h4>
+            {difficulty}
+          </h4>
+      </Multiply>
+    )
+  }
+
+const Pontos: React.FC<IPointsProps> = ({ pointsList }) => {
+  console.log(pointsList)
+  return (
+    <Container>
+        <main>
+            <h3>Pontos</h3>
+            <section>
+                <MultiplyPoints
+                multiplier = "1"
+                difficulty = "15"
+                color = "#78C516"
+                ></MultiplyPoints>
+
+                <MultiplyPoints
+                multiplier = "2"
+                difficulty = "10"
+                color = "#F7CF00"
+                ></MultiplyPoints>
+
+                <MultiplyPoints
+                multiplier = "4"
+                difficulty = "Difícil"
+                color = "#E45B5B"
+                ></MultiplyPoints>
+
+                <MultiplyPoints
+                multiplier = "8"
+                difficulty = "Muito difícil"
+                color = "#8B0909"
+                ></MultiplyPoints>
+
+            </section>
+
+            <SortableTable
+            columnHeaders={[
+                { title: 'Descrição da atividade', },
+                { title: 'Pontos' , sortable: false},
+            ]}
+            >
+            {pointsList.map(points => (
+                <tr>
+                <td>{points.description }</td>
+                <td>{points.points + points.is_multipliable}</td>
+                </tr>
+            ))}
+            </SortableTable>
+
+        </main>
+
+    </Container>
+  )
+}
+
+
+export const getServerSideProps: GetServerSideProps = async context => {
+  console.log('teste')
+  const { data: pointsList } = await api.get('/what-give-points')
+  console.log(pointsList)
+  return {
+    props: {
+        pointsList
+    } 
+  }
+}
+
+export default Pontos

src/styles/pages/Contact.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { Form } from '@unform/web'
-import { Main as Button } from '@/components/Button/styles.ts'
+import { Main as Button } from '@/components/Button/styles'
 
 export const Container = styled.main`
   width: 100%;

src/styles/pages/Pontos.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+interface IColorProps {
+    jagunso: string;
+  }
+
+export const Multiply = styled.div<IColorProps>`
+  align-items: center;
+  display: flex;
+  font-size: 25px;
+  padding: 1rem;
+
+  >h3{
+    font-weight: 500;
+    margin-right: 16px;
+    font-size: 24px;
+    border-radius: 8px;
+    padding: 1rem;
+    color: white !important;
+    background: ${(props) => (props.jagunso)} !important;
+  }
+  >h4{
+      font-size: 16px;
+  }
+`;

src/styles/pages/Ranking.ts

@@ -4,14 +4,23 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
+  
   main {
     width: min(85vw, 500px);
     display: flex;
     flex-direction: column;
     gap: 2.4rem;
     justify-content: center;
     align-items: center;
+    >section{
+      align-items: center;
+      display: flex;
+      align-self: flex-start;
+      justify-content: space-between;
+      background: #F1F1F1;
+      border-radius: 8px;
+      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
+    }
     > h3 {
       margin-top: 2rem;
       width: 100%;