Skip to content
Snippets Groups Projects
Commit d7a8ae6f authored by lfr20's avatar lfr20
Browse files

Fixed position of the achievements section

parent 55bcea22
Branches exemplo/1
No related tags found
1 merge request!47Merge
Show whitespace changes
Inline Side-by-side
src/Components/TabPanels/TabPanelStatusEConquistas.js
+ 250
− 25
View file @ d7a8ae6f
...@@ -15,51 +15,271 @@ import { Grid } from '@material-ui/core' ...@@ -15,51 +15,271 @@ import { Grid } from '@material-ui/core'
export default function TabPanelStatusEConquistas(props) { export default function TabPanelStatusEConquistas(props) {
const [achievements, setAchievements] = useState([ const [achievements, setAchievements] = useState([
{
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [
{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 5,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 5
},
]
},
{ {
title: "Doctor Strange", title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!", description: "Hey, its doctor strange here!",
requirements: [{ requirements: [{
name : "yep!", name: "Curtidor!",
description : "yep!" description: "Curtir 5 coleções",
}] steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 5
},
]
}, },
{ {
title: "Doctor Strange", title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!", description: "Hey, its doctor strange here!",
requirements: [{ requirements: [{
name : "yep!", name: "Curtidor!",
description : "yep!" description: "Curtir 5 coleções",
}] steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, },
{ {
title: "Doctor Strange", title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!", description: "Hey, its doctor strange here!",
requirements: [{ requirements: [{
name : "yep!", name: "Curtidor!",
description : "yep!" description: "Curtir 5 coleções",
}] steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, },
{ {
title: "Doctor Strange", title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!", description: "Hey, its doctor strange here!",
requirements: [{ requirements: [{
name : "yep!", name: "Curtidor!",
description : "yep!" description: "Curtir 5 coleções",
}] steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, },
{ {
title: "Doctor Strange", title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!", description: "Hey, its doctor strange here!",
requirements: [{ requirements: [{
name : "yep!", name: "Curtidor!",
description : "yep!" description: "Curtir 5 coleções",
}] steps : 5,
} currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
}, {
title: "Doctor Strange",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 2
},
]
},
]); ]);
const [level, setLevel] = useState(0); const [level, setLevel] = useState(0);
const [xp, setXP] = useState(0); const [xp, setXP] = useState(0);
...@@ -98,15 +318,15 @@ export default function TabPanelStatusEConquistas(props) { ...@@ -98,15 +318,15 @@ export default function TabPanelStatusEConquistas(props) {
</Paper> </Paper>
</ContainerDivStyled> </ContainerDivStyled>
<AchievementsContainer> <AchievementsContainer>
<AchievementsList>
<AchievementsSectionTitle> <AchievementsSectionTitle>
Conquistas Conquistas
</AchievementsSectionTitle> </AchievementsSectionTitle>
<AchievementsList> <Grid container direction="row" justify="center" alignItems="center" spacing={4} xs={12}>
<Grid container direction="row" justify="space-around" alignItems="center">
{achievements.map( {achievements.map(
(a) => { (a, index) => {
return ( return (
<Grid item xs={12} md={5}> <Grid item key={index}>
<AchievementDescriptionCard <AchievementDescriptionCard
name={a.title} name={a.title}
description={a.description} description={a.description}
...@@ -129,12 +349,17 @@ const AchievementsSectionTitle = styled.h1` ...@@ -129,12 +349,17 @@ const AchievementsSectionTitle = styled.h1`
` `
const AchievementsContainer = styled.div` const AchievementsContainer = styled.div`
max-width : 1140px; max-width : 1140px;
margin-left : auto;
margin-right : auto;
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 70px; margin-top: 70px;
margin-left : auto;
margin-right : auto;
` `
const AchievementsList = styled.div` const AchievementsList = styled.div`
display: flex;
flex-direction: column
flex: 1;
justify-content: center;
alignItems: center;
` `
const CardContainer = styled.div` const CardContainer = styled.div`
` `
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment