add download view

scm-ui/src/repos/sources/components/content/DownloadViewer.js

@@ -1,28 +1,52 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
+import type { File } from "@scm-manager/ui-types";
+import { DownloadButton, DateFromNow } from "@scm-manager/ui-components";
 
 type Props = {
-  t: string => string
+  t: string => string,
+  file: File,
+  revision: string
 };
 
-type State = {
-  content: string
-};
-
-class DownloadViewer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      content: ""
-    };
-  }
-
-  componentDidMount() {}
-
+class DownloadViewer extends React.Component<Props> {
   render() {
-    return "DownloadViewer";
+    const { t, file, revision } = this.props;
+    return (
+      <div>
+        <article className="media">
+          <div className="content media-left">
+            <h4>{file.name}</h4>
+          </div>
+          <div className="media-content" />
+          <div className="media-right">
+            <DownloadButton
+              url={file._links.self.href}
+              displayName={t("sources.content.downloadButton")}
+            />
+          </div>
+        </article>
+        <table className="table">
+          <tbody>
+            <tr>
+              <td>{t("sources.description")}</td>
+              <td>{file.description}</td>
+            </tr>
+            <tr>
+              <td>{t("sources.lastModified")}</td>
+              <td>
+                <DateFromNow date={file.lastModified} />
+              </td>
+            </tr>
+            <tr>
+              <td>{t("sources.branch")}</td>
+              <td>{revision}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
   }
 }