change comment-form with two tabs

resource/js/components/PageComment/CommentForm.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormControl from 'react-bootstrap/es/FormControl';
 import Button from 'react-bootstrap/es/Button';
+import FormControl from 'react-bootstrap/es/FormControl';
+import Panel from 'react-bootstrap/es/panel';
+import Tab from 'react-bootstrap/es/tab';
+import Tabs from 'react-bootstrap/es/tabs';
 import UserPicture from '../User/UserPicture';
 
 /**
@@ -30,25 +33,34 @@ export default class CommentForm extends React.Component {
         </div>
         <div className="comment-form-main">
           <div className="comment-write">
-            <textarea className="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]" required placeholder="Write comments here..." >
-            </textarea>
-            <div className="form-check">
-            <input type="checkbox" className="form-check-input" id="checkbox-markdown" />
-              <label className="form-check-label" htmlFor="checkbox-markdown">Markdown</label>
-            </div>
+            <Tabs defaultActiveKey={1} id="comment-form-tabs">
+              <Tab eventKey={1} title="Write">
+                <div className="textarea">
+                  <textarea className="comment-form-comment form-control" id="comment-form-comment" name="commentForm[comment]" required placeholder="Write comments here..." >
+                  </textarea>
+                </div>
+              </Tab>
+              <Tab eventKey={2} title="Prevrew">
+                <Panel className="comment-form-preview">
+                  Preview
+                </Panel>
+              </Tab>
+            </Tabs>
           </div>
           <div className="comment-submit">
+            <input type="checkbox" className="form-check-input" id="checkbox-markdown" />
+            <label className="form-check-label" htmlFor="checkbox-markdown">Markdown</label>
             <div className="pull-right">
               <Button bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
-                  Comment
+                 Comment
               </Button>
             </div>
             <div className="clearfix">
             </div>
           </div>
         </div>
-      </div>
-    );
+       </div>
+     );
   }
 }
 

resource/styles/scss/_comment_growi.scss

@@ -99,6 +99,11 @@
         transition: height 0.2s ease-out;
         height: 180px;
       }
+
+    // formPreview
+    .comment-form-preview{
+      height: 80px;
+    }
     }
   }
 }