From b130be9013ec2bc37d25f85ebabd0456abdd8063 Mon Sep 17 00:00:00 2001
From: Raul Almeida <rgpa18@inf.ufpr.br>
Date: Thu, 5 Mar 2020 11:48:02 -0300
Subject: [PATCH] WIP Add Achievement Description Component
---
src/Components/AchievementDescriptionCard.js | 33 +++++++++++++++++
.../TabPanels/TabPanelStatusEConquistas.js | 35 +++----------------
2 files changed, 37 insertions(+), 31 deletions(-)
create mode 100644 src/Components/AchievementDescriptionCard.js
diff --git a/src/Components/AchievementDescriptionCard.js b/src/Components/AchievementDescriptionCard.js
new file mode 100644
index 00000000..ebe9e5cd
--- /dev/null
+++ b/src/Components/AchievementDescriptionCard.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import { Grid } from '@material-ui/core'
+
+export default function AchievementDescriptionCard(props) {
+ return (
+ <Paper elevation={3}>
+ <Grid container direction="row" justify="space-around" alignItems="center">
+ <Grid item xs={5}>
+ <AchievementImg src={props.src ? props.src : "https://material-ui.com/static/images/grid/complex.jpg"}/>
+ </Grid>
+ <Grid item xs={5}>
+ <AchievementTitle>{props.title ? props.title : "Conquistador de conquistas"}</AchievementTitle>
+ <AchievementDescription>{props.description ? props.description : "Conquiste conquistas"}</AchievementDescription>
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+}
+
+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/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index f8d04824..be46d532 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -27,24 +27,11 @@ export default function TabPanelStatusEConquistas (props) {
</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 item xs={12} md={5}>
+ <AchievementDescriptionCard/>
</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 item xs={12} md={5}>
+ <AchievementDescriptionCard/>
</Grid>
</Grid>
</AchievementsList>
@@ -65,18 +52,4 @@ const AchievementsContainer = styled.div`
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
--
GitLab