Progress

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -1,13 +1,18 @@
+import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { me } from '../../initial_state'
 import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
-import UserStat from '../user_stat'
+import Button from '../button'
+import Divider from '../divider'
+import Heading from '../heading'
+import Icon from '../icon'
+import Text from '../text'
 
 const messages = defineMessages({
   title: { id: 'about', defaultMessage: 'About' },
+  members: { id: 'members', defaultMessage: 'Members' },
 })
 
 export default
@@ -24,7 +29,45 @@ class GroupInfoPanel extends ImmutablePureComponent {
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-        
+        {
+          !!group &&
+          <Fragment>
+
+            <Heading size='h3'>
+              {group.get('title')}
+            </Heading>
+
+            <Divider small />
+
+            <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+                <Icon id='group' height='14px' width='14px' />
+                <Text size='small' className={_s.marginLeft5PX}>
+                  {intl.formatMessage(messages.members)}
+                </Text>
+              </div>
+              <Button
+                text
+                to={`/groups/${group.get('id')}/members`}
+                color='brand'
+                backgroundColor='none'
+                className={_s.marginLeftAuto}
+              >
+                <Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
+                  {shortNumberFormat(group.get('member_count'))}
+                  &nbsp;
+                  {intl.formatMessage(messages.members)}
+                </Text>
+              </Button>
+            </div>
+
+            <Divider small />
+
+            <Text>
+              {group.get('description')}
+            </Text>
+          </Fragment>
+        }
       </PanelLayout>
     )
   }