Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.

app/javascript/gabsocial/components/section_headline_bar/index.js

@@ -0,0 +1 @@
+export { default } from './section_headline_bar';

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.js

@@ -0,0 +1,52 @@
+import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+class SectionHeadlineBarItem extends PureComponent {
+  static propTypes = {
+    to: PropTypes.string,
+    icon: PropTypes.string,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    title: PropTypes.oneOf([
+      PropTypes.string,
+      PropTypes.node,
+    ]),
+  };
+
+  render() {
+    const { to, title, icon, className, onClick } = this.props;
+
+    const classes = classNames('section-header-bar__item', className);
+
+    if (to) {
+      return (<NavLink className={classes} to={to}>{title}</NavLink>);
+    } else if (icon) {
+      <button className={classes} onClick={onClick} title={title}>
+        <Icon id={icon} fixedWidth />
+      </button>
+    }
+
+    return (<button className={classes} onClick={onClick}>{title}</button>)
+  }
+};
+
+export default class SectionHeadlineBar extends PureComponent {
+  static propTypes = {
+    items: PropTypes.array,
+  };
+
+  render() {
+    const { items } = this.props;
+
+    return (
+      <div className='section-headline-bar'>
+        {
+          items.forEach(item, i => (
+            <SectionHeadlineBarItem key={`shbi-{i}`} {...item} />
+          ))
+        }
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.scss

@@ -0,0 +1,50 @@
+.section-headline-bar {
+  background: darken($ui-base-color, 4%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  cursor: default;
+  display: flex;
+  flex-shrink: 0;
+
+  button {
+    background: darken($ui-base-color, 4%);
+    border: 0;
+    margin: 0;
+  }
+
+  button,
+  a {
+    display: block;
+    flex: 1 1 auto;
+    color: $secondary-text-color;
+    padding: 15px 0;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    position: relative;
+
+    &.active {
+      color: $primary-text-color;
+
+      &::before,
+      &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 0;
+        height: 0;
+        transform: translateX(-50%);
+        border-style: solid;
+        border-width: 0 10px 10px;
+        border-color: transparent transparent lighten($ui-base-color, 8%);
+      }
+
+      &::after {
+        bottom: -1px;
+        border-color: transparent transparent $ui-base-color;
+      }
+    }
+  }
+}