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

Fixed position of the achievements section

parent 55bcea22
No related branches found
No related tags found
1 merge request!47Merge
......@@ -15,51 +15,271 @@ import { Grid } from '@material-ui/core'
export default function TabPanelStatusEConquistas(props) {
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",
imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg",
description: "Hey, its doctor strange here!",
requirements: [{
name : "yep!",
description : "yep!"
}]
name: "Curtidor!",
description: "Curtir 5 coleções",
steps : 5,
currStep : 3,
},
{
name: "Divulgador!",
description: "Divulgar 5 coleções",
steps : 5,
currStep : 5
},
]
},
{
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 : "yep!",
description : "yep!"
}]
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 : "yep!",
description : "yep!"
}]
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 : "yep!",
description : "yep!"
}]
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 : "yep!",
description : "yep!"
}]
}
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
},
]
}, {
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 [xp, setXP] = useState(0);
......@@ -98,15 +318,15 @@ export default function TabPanelStatusEConquistas(props) {
</Paper>
</ContainerDivStyled>
<AchievementsContainer>
<AchievementsSectionTitle>
Conquistas
</AchievementsSectionTitle>
<AchievementsList>
<Grid container direction="row" justify="space-around" alignItems="center">
<AchievementsSectionTitle>
Conquistas
</AchievementsSectionTitle>
<Grid container direction="row" justify="center" alignItems="center" spacing={4} xs={12}>
{achievements.map(
(a) => {
(a, index) => {
return (
<Grid item xs={12} md={5}>
<Grid item key={index}>
<AchievementDescriptionCard
name={a.title}
description={a.description}
......@@ -129,12 +349,17 @@ const AchievementsSectionTitle = styled.h1`
`
const AchievementsContainer = styled.div`
max-width : 1140px;
margin-left : auto;
margin-right : auto;
margin-bottom: 30px;
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`
`
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment