diff --git a/src/components/extra/GroupCard.js b/src/components/extra/GroupCard.js new file mode 100644 index 0000000000000000000000000000000000000000..b3e7f3af4b04089d3d1a9d316b0fda3b516b864a --- /dev/null +++ b/src/components/extra/GroupCard.js @@ -0,0 +1,16 @@ +import React, {Component} from 'react' +import { Segment, Header, Divider } from 'semantic-ui-react'; + +class HiddenForm extends Component { + render(){ + return ( + <Segment style={{ marginTop: 0 }}> + <Divider style={{ fontSize: '2em'}} horizontal><Header as='h3' style={{ fontSize: '1.2em'}}>{this.props.label}</Header></Divider> + <div className='paragraph' dangerouslySetInnerHTML={{__html: this.props.value}}> + </div> + </Segment> + ) + } +} + +export default HiddenForm \ No newline at end of file diff --git a/src/components/pages/Groups.js b/src/components/pages/Groups.js index 7e725cb33c2ecf9676a1ac596e7a15a7347bdd86..e9e3f6ccb83c897282778985ef5c5e7ab3e97f42 100644 --- a/src/components/pages/Groups.js +++ b/src/components/pages/Groups.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { Container, Header, Segment, Divider } from 'semantic-ui-react'; import './Groups.css'; +import GrouCard from '../extra/GroupCard' import { connect } from 'react-redux'; import { getGroups } from '../../actions/groups'; @@ -30,14 +31,10 @@ class Groups extends Component { </Container> </Segment> - <Segment style={{ padding: '8em 0em' }} vertical> + <Segment style={{ padding: '1em 0em 5em' }} vertical> <Container text> { this.props.groups.map(item => { - return <div key={item.id}> - <Header as='h3' style={{ fontSize: '2em' }}>{item.name}</Header> - <div className='paragraph' dangerouslySetInnerHTML={{__html: item.description}}> - </div> - </div> + return <GrouCard key={item.id} label={item.name} value={item.description}/> })} </Container> </Segment>