From e3aac2d13ee0821df708d70f547e7b197b57451c Mon Sep 17 00:00:00 2001
From: Raul Almeida <rgpa18@inf.ufpr.br>
Date: Thu, 5 Mar 2020 10:52:27 -0300
Subject: [PATCH] =?UTF-8?q?Cria=20aba=20status=20e=20conquistas=20no=20per?=
=?UTF-8?q?fil=20de=20usu=C3=A1rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Também inicia a lista de conquistas
TODO:
* [ ] Transformar os itens da lista de conquistas em um componente
---
src/Components/MenuBar.js | 9 +++--
.../TabPanels/TabPanelStatusEConquistas.js | 40 +++++++++++++++++++
src/Pages/UserPage.js | 13 +++---
3 files changed, 53 insertions(+), 9 deletions(-)
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index f3632a4c..2349423e 100644
--- a/src/Components/MenuBar.js
+++ b/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"},
]
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index 63d6243e..f8d04824 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/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>
);
@@ -39,4 +63,20 @@ const AchievementsContainer = styled.div`
margin-left : 20em;
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
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 420912ac..f6efec56 100644
--- a/src/Pages/UserPage.js
+++ b/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>
@@ -229,11 +231,12 @@ export default function UserPage (props){
</Paper>
</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 === 0 && <TabPanelAtividades 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>
--
GitLab