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

Added this file to display the content of the expanded material

parent dbce4fd9
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!27Training materials
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
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