use cover instead of preview of coverSrc

src/components/Document.js

@@ -1,23 +0,0 @@
-const React = require('react')
-const {ext, size} = require('../lib/file')
-const {titleCase} = require('../lib/string')
-
-const Document = ({title, url, imageUrl, fileUrl, fileName, fileSize}) => (
-	<div className="document">
-		<div className="document__image">
-			<a href={fileUrl} target="_blank" className="invisible">
-				<img src={imageUrl} alt={title}/>
-			</a>
-		</div>
-
-		<div className="document__file">
-			<span>{titleCase(title)}</span>
-		</div>
-
-		<div className="document__file-info">
-			<a href={fileUrl} target="_blank">{ext(fileName)} ({size(fileSize)})</a>
-		</div>
-	</div>
-)
-
-module.exports = Document

src/components/File/index.tsx

@@ -0,0 +1,25 @@
+import { FileDefinition } from 'src/types'
+import { ext, size } from 'src/lib/file'
+import { titleCase } from 'src/lib/string'
+
+export const File: React.SFC<FileDefinition> = props => (
+    <div className="document">
+        <h1>{titleCase(props.name)}</h1>
+
+        {!props.cover?.src ? null : (
+            <div className="document__image">
+                <a href={props.file.src} target="_blank" className="invisible">
+                    <img src={props.cover.src} alt={props.name} />
+                </a>
+            </div>
+        )}
+
+        <div className="document__file">
+            <span>{titleCase(props.name)}</span>
+        </div>
+
+        <div className="document__file-info">
+            <a href={props.file.src} target="_blank">{ext(props.file.name)} ({size(props.file.size)})</a>
+        </div>
+    </div>
+)