From ee5f5f185931271b13369e1887c4478d21b3f542 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 27 Jan 2021 12:35:27 -0300
Subject: [PATCH] Added this file to display the content of the expanded
material
---
src/Components/ExpandedMaterials.js | 84 +++++++++++++++++++++++++++++
1 file changed, 84 insertions(+)
create mode 100644 src/Components/ExpandedMaterials.js
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
new file mode 100644
index 00000000..96308a6f
--- /dev/null
+++ b/src/Components/ExpandedMaterials.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Typography } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import { Container } from "react-grid-system";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+}));
+
+const ExpandedMaterial = (props) => {
+ const material = { ...props.material };
+ const classes = useStyles();
+
+ return (
+ <Container style={{ backgroundColor: "#444444", padding : "20px" }}>
+ <Grid container direction="row">
+ <Grid item direction="column" xs={4}>
+ <Grid item>
+ <Title variant="body2">
+ {
+ material.name
+ }
+ </Title>
+ </Grid>
+ <Grid item>
+ <ChipsDiv className={classes.root}>
+ {
+ material.tags.map((tag, index) => {
+ return (
+ <Chip color="default" label={tag.name} key={index} style={{padding : "0.5px"}} />
+ )
+ })
+ }
+ </ChipsDiv>
+ </Grid>
+ <div>
+ <DevelopedTypo>
+ Desenvolvido por:
+ </DevelopedTypo>
+ <DevelopedSpan>
+ {
+ material.developed
+ }
+ </DevelopedSpan>
+ </div>
+ </Grid>
+ </Grid>
+ </Container>
+ );
+}
+
+const Title = styled.h3`
+ color: White;
+ font-weight: 500;
+ padding : 0;
+ margin : 0;
+`
+
+const ChipsDiv = styled.div`
+ margin-left : -5px;
+`
+
+const DevelopedSpan = styled.span`
+ color : white;
+ opacity : 0.9;
+
+`
+
+const DevelopedTypo = styled(Typography)`
+ color : white;
+ font-weight: bold;
+`
+
+
+export default ExpandedMaterial;
\ No newline at end of file
--
GitLab