Cria aba status e conquistas no perfil de usuário

Também inicia a lista de conquistas
TODO:
* [ ] Transformar os itens da lista de conquistas em um componente

src/Components/MenuBar.js

@@ -110,10 +110,11 @@ export default function MenuBar(props){
 
   const minhaArea = [
       { name: "Perfil e Atividades", href: "/perfil", value : '0'},
-      { name: "Recursos Publicados", href: "/perfil", value : '1'},
-      { name: "Favoritos", href: "/perfil", value : '2'},
-      { name: "Coleções", href: "/perfil", value : '3'},
-      { name: "Rede", href: "/perfil", value : '4'},
+      { name: "Status e Conquistas", href: "/perfil", value: '1'},
+      { name: "Recursos Publicados", href: "/perfil", value : '2'},
+      { name: "Favoritos", href: "/perfil", value : '3'},
+      { name: "Coleções", href: "/perfil", value : '4'},
+      { name: "Rede", href: "/perfil", value : '5'},
       { name: "Configurações", href: "/editarperfil"},
   ]
 

src/Components/TabPanels/TabPanelStatusEConquistas.js

@@ -11,6 +11,7 @@ import axios from 'axios'
 import {apiUrl} from '../../env';
 import LevelDescriptionCard from '../LevelDescriptionCard.js'
 import AchievementDescriptionCard from '../AchievementDescriptionCard.js'
+import { Grid } from '@material-ui/core'
 
 export default function TabPanelStatusEConquistas (props) {
     return (
@@ -24,6 +25,29 @@ export default function TabPanelStatusEConquistas (props) {
           <AchievementsSectionTitle>
             Conquistas
           </AchievementsSectionTitle>
+          <AchievementsList>
+            <Grid container direction="row" justify="space-around" alignItems="center">
+              <Grid container item xs={12} md={3} direction="row" justify="space-around" alignItems="center">
+                  <Grid item xs={5}>
+                      <AchievementImg src="https://lojabagaggio.vteximg.com.br/arquivos/ids/2262429/Garrafas-e-Squeeze.jpg?v=636996613696070000"/>
+                  </Grid>
+                  <Grid item xs={5}>
+                      <AchievementTitle>
+                      Conquistador de Conquistas
+                      </AchievementTitle>
+                      <AchievementDescription>
+                      Conquiste conquistas.
+                      </AchievementDescription>
+                  </Grid>
+              </Grid>
+              <Grid container item xs={12} md={3}>
+                Algo como ao lado
+              </Grid>
+              <Grid container item xs={12} md={3}>
+                Algo como ao lado
+              </Grid>
+            </Grid>
+          </AchievementsList>
         </AchievementsContainer>
       </div>
     );
@@ -40,3 +64,19 @@ const AchievementsContainer = styled.div`
   margin-bottom: 30px;
   margin-top: 70px;
 `
+const AchievementsList = styled.div`
+  margin: 30px;
+  padding: 30px;
+`
+
+const AchievementImg = styled.img`
+  border-radius: 100px;
+  width: 100px;
+  height: 100px;
+`
+
+const AchievementTitle = styled.h1`
+`
+
+const AchievementDescription = styled.p`
+`
\ No newline at end of file

src/Pages/UserPage.js

@@ -37,6 +37,7 @@ import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.j
 import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js'
 import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js'
 import TabPanelRede from '../Components/TabPanels/TabPanelRede.js'
+import TabPanelStatusEConquistas from '../Components/TabPanels/TabPanelStatusEConquistas.js'
 import axios from 'axios'
 import {apiUrl} from '../env';
 import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
@@ -222,6 +223,7 @@ export default function UserPage (props){
                                                     <StyledTab label={tabs[2]}/>
                                                     <StyledTab label={tabs[3]}/>
                                                     <StyledTab label={tabs[4]}/>
+                                                    <StyledTab label={tabs[5]}/>
                                                 </StyledTabs>
                                             </NavBarContentContainer>
                                         </RodapeDiv>
@@ -230,10 +232,11 @@ export default function UserPage (props){
                                 </MainContainerDesktop>
                                 </div>
                                 {tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}                                
-                                {tabValue === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
-                                {tabValue === 2 && <TabPanelFavoritos id={id} config={config}/>}
-                                {tabValue === 3 && <TabPanelColecoes id={id} config={config}/>}
-                                {tabValue === 4 && <TabPanelRede id={id} config={config}/>}
+                                {tabValue === 1 && <TabPanelStatusEConquistas id={id} config={config}/>}
+                                {tabValue === 2 && <TabPanelMeusRecursos id={id} config={config}/>}
+                                {tabValue === 3 && <TabPanelFavoritos id={id} config={config}/>}
+                                {tabValue === 4 && <TabPanelColecoes id={id} config={config}/>}
+                                {tabValue === 5 && <TabPanelRede id={id} config={config}/>}
                             </ContainerNoPad>
                         </HeaderDiv>
                     </React.Fragment>