Renamed /src to /frontend

frontend/components/Layout/components/HeaderAction/HeaderAction.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './HeaderAction.scss';
+
+const HeaderAction = (props) => {
+  return (
+    <div
+      onClick={ props.onClick }
+      className={ styles.container }
+    >{ props.children }</div>
+  );
+};
+
+HeaderAction.propTypes = {
+  onClick: React.PropTypes.func,
+};
+
+export default HeaderAction;

frontend/components/Layout/components/HeaderAction/HeaderAction.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  min-height: 43px;
+  padding: 0 0.5rem;
+  color: #0C77F8;
+}

frontend/components/Layout/components/HeaderAction/index.js

@@ -0,0 +1,2 @@
+import HeaderAction from './HeaderAction';
+export default HeaderAction;

frontend/components/Layout/components/Title/Title.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import _truncate from 'lodash/truncate';
+
+import styles from './Title.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+const Title = (props) => {
+  let title;
+  if (props.truncate) {
+    title = _truncate(props.children, props.truncate);
+  } else {
+    title = props.children;
+  }
+
+  let usePlaceholder;
+  if (props.children === null && props.placeholder) {
+    title = props.placeholder;
+    usePlaceholder = true;
+  }
+
+  return(
+    <span
+      title={ props.children }
+      className={ cx(styles.title, { untitled: usePlaceholder })}
+    >
+      { title }
+    </span>
+  );
+};
+
+Title.propTypes = {
+  children: React.PropTypes.string,
+  truncate: React.PropTypes.number,
+  placeholder: React.PropTypes.string,
+}
+
+export default Title;

frontend/components/Layout/components/Title/Title.scss

@@ -0,0 +1,7 @@
+.title {
+
+}
+
+.untitled {
+  color: #ccc;
+}

frontend/components/Layout/components/Title/index.js

@@ -0,0 +1,2 @@
+import Title from './Title';
+export default Title;