import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import HTML3D from 'react-three-renderer-html3d/lib/HTML3D';

import FlatButton from 'material-ui/lib/flat-button';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardText from 'material-ui/lib/card/card-text';
import LikeIcon from 'material-ui/lib/svg-icons/action/thumb-up';
import CommentIcon from 'material-ui/lib/svg-icons/communication/message';
import Shareicon from 'material-ui/lib/svg-icons/social/share';

export default class Post extends React.Component
{
    styleButton = {
        color: '#ddd'
    };

    onLike = () => {
        alert('Like event');
    };

    onComment = () => {
        alert('Comment event');
    };

    onShare = () => {
        alert('Share event');
    };

    render() {

        return (
            <HTML3D {...this.props}>
                <ReactCSSTransitionGroup transitionEnterTimeout={500} transitionLeaveTimeout={500} transitionName="post" transitionAppear={true} transitionAppearTimeout={500}>
                        <Card style={{width: '500px', opacity: 0.9 }} initiallyExpanded={true}>
                            <CardHeader
                                title="Arthur Schwaiger"
                                subtitle="13 min"
                                actAsExpander={true}
                                showExpandableButton={true}
                                initiallyExpanded={true}
                                avatar="https://scontent-bru2-1.xx.fbcdn.net/v/t1.0-1/c16.19.155.155/s32x32/380108_2617196464115_1292327190_n.jpg?oh=f3e5a7f5e96e5f7851f5b09e85010bbe&oe=57A276FF"
                            />
                            <CardText expandable={true} initiallyExpanded={true}>
                                {this.props.children}
                            </CardText>
                            <CardActions expandable={true}>
                                <FlatButton
                                    label="Like"
                                    onClick={this.onLike}
                                    icon={<LikeIcon />}
                                    style={this.styleButton}
                                />
                                <FlatButton
                                    label="Comment"
                                    onClick={this.onComment}
                                    icon={<CommentIcon />}
                                    style={this.styleButton}
                                />
                                <FlatButton
                                    label="Share"
                                    onClick={this.onShare}
                                    icon={<Shareicon />}
                                    style={this.styleButton}
                                />
                            </CardActions>
                        </Card>
                </ReactCSSTransitionGroup>
            </HTML3D>
        );
    }
}

@@ -1794,35 +1794,43 @@
                 
-/%3E%0A
+    /%3E%0A    
                 
@@ -1927,16 +1927,20 @@
         
+   
+ 
 %7Bthis.pr
@@ -1953,16 +1953,20 @@
 ildren%7D%0A
+    
         
@@ -2021,24 +2021,28 @@
             
+    
 %3CCardActions
@@ -2085,32 +2085,36 @@
                 
+  
+  
 %3CFlatButton%0A    
@@ -2101,32 +2101,36 @@
     %3CFlatButton%0A
+    
                 
@@ -2190,32 +2190,36 @@
                 
+    
 onClick=%7Bthis.on
@@ -2256,24 +2256,28 @@
             
+ 
+   
 icon=%7B%3CLikeI
@@ -2276,32 +2276,36 @@
 =%7B%3CLikeIcon /%3E%7D%0A
+    
                 
@@ -2341,32 +2341,36 @@
 is.styleButton%7D%0A
+    
                 

fix indent