scaffolds beginning of Media Library

src/components.js

@@ -64,5 +64,6 @@ export { default as SetSearchParams } from './components/utilities/SetSearchPara
 export { default as Dashboard } from './components/views/Dashboard';
 export { default as Login } from './components/views/Login';
 export { default as CreateUser } from './components/views/CreateUser';
+export { default as MediaLibrary } from './components/views/MediaLibrary';
 export { default as ListView } from './components/views/collections/List';
 export { default as EditView } from './components/views/collections/Edit';

src/components/controls/Button/index.scss

@@ -23,7 +23,7 @@
 
     &.btn-secondary {
         border: $stroke-width solid $primary;
-        color: $black;
+        color: $primary;
         background: none;
 
         &.btn-icon {

src/components/layout/Sidebar/index.js

@@ -37,8 +37,18 @@ const Sidebar = props => {
       </nav>
       <span className="uppercase-label">Globals</span>
       <nav>
-        <NavLink activeClassName="active" to="/components">Components</NavLink>
-        <NavLink activeClassName="active" to="/settings">Settings</NavLink>
+        <NavLink activeClassName="active" to="/media-library">
+          <Arrow />
+          Media Library
+        </NavLink>
+        <NavLink activeClassName="active" to="/components">
+          <Arrow />
+          Components
+        </NavLink>
+        <NavLink activeClassName="active" to="/settings">
+          <Arrow />
+          Settings
+        </NavLink>
       </nav>
     </aside>
   );

src/components/layout/Table/index.js

@@ -18,10 +18,11 @@ const Table = props => {
             return (
               <tr key={i}>
                 {props.columns.map((col, i) => {
+                  const value = col.handler ? col.handler(row[col.key]) : row[col.key];
                   return (
                     <td key={i}>
-                      {row[col.key]
-                        ? row[col.key]
+                      {value
+                        ? value
                         : <span className="no-data" dangerouslySetInnerHTML={{ __html: '&mdash;' }} />
                       }
                     </td>

src/components/modules/SearchableTable/index.js

@@ -16,8 +16,9 @@ class SearchableTable extends Component {
         key: '_id',
         label: 'ID'
       }, {
-        key: 'published',
-        label: 'Published On'
+        key: 'createdAt',
+        label: 'Created At',
+        handler: time => new Date(time).toDateString()
       }]
     }
   }

src/components/views/MediaLibrary/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SetStepNav } from 'payload/components';
+
+const MediaLibrary = props => {
+
+  return (
+    <div className="media-library">
+      <SetStepNav nav={[{
+        label: 'Media Library'
+      }]} />
+      <h1>Media Library</h1>
+    </div>
+  )
+}
+
+export default MediaLibrary;