Repo-view page with header, sidebar and body

static/js/directives/components/pages/repo-page/sidebar.tsx

@@ -1,8 +1,84 @@
 import * as React from "react";
+import * as moment from "moment";
 
-class repoSidebar extends React.Component<{}, {}> {
+interface tag {
+  image_id: string;
+  last_modified: string;
+  name: string;
+  size: number;
+}
+
+interface ISidebar {
+  isPublic: string,
+  tags: Array<tag>,
+  repository: Object
+}
+
+class repoSidebar extends React.Component<ISidebar, {}> {
+  static propTypes = {
+    isPublic: React.PropTypes.string.isRequired,
+    tags: React.PropTypes.array.isRequired,
+    repository: React.PropTypes.object.isRequired
+  }
   render () {
-    return <div> The component for the sidebar</div>;
+    let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
+    let sortedTags: Array<any> = [];
+    let tagRows: Array<any> = [];
+    let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
+    let repository: any = this.props.repository;
+    let sharing: string = repository.company || repository.namespace;
+    for (let t in this.props.tags){
+      sortedTags.push(
+        {
+          name: this.props.tags[t].name,
+          lastModified: Date.parse(this.props.tags[t].last_modified)
+        }
+      );
+    }
+
+    sortedTags = sortedTags.sort(function(a,b){return a.lastModified - b.lastModified});
+    sortedTags.forEach(function(el, i){
+      tagRows.push(
+        <tr>
+          <td>
+            <i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
+            {el.name}                   
+          </td>
+          <td>
+            {moment(el.lastModified).fromNow()}
+          </td>
+        </tr>
+      );
+    });
+
+    return(
+      <div>
+        <div className="rp-badge">
+          <div className={badgeIcon}>
+            {isPublic}
+          </div>
+        </div>
+        <div className="rp-sharing">
+          {sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
+        </div>
+        <div className="rp-imagesHeader">
+          Latest Images
+        </div>
+        <div>
+          <table className="co-table co-fixed-table rp-imagesTable">
+            <thead>
+              <tr>
+                <th className="rp-imagesTable__headerCell">NAME</th>
+                <th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tagRows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );    
   }
 }