Upload list now displays as a table.

This commit is contained in:
Jayden Seric 2017-04-09 13:10:15 +10:00
parent 5db464aa1a
commit 14d941fad2

View File

@ -1,12 +1,36 @@
import {graphql, gql} from 'react-apollo'
const UploadList = ({data: {allUploads, loading}}) => {
const UploadList = ({data: {allUploads}}) => {
return (
<ul>
{allUploads.map((file, i) => {
return <li key={i}>{file.name}</li>
})}
</ul>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Path</th>
</tr>
</thead>
<tbody>
{allUploads.map(({name, type, size, path}) => (
<tr key={path}>
<td>{name}</td>
<td>{type}</td>
<td>{size}</td>
<td>{path}</td>
</tr>
))}
</tbody>
<style jsx>{`
table {
text-align: left;
border-spacing: 0.75em;
}
td {
vertical-align: top;
}
`}</style>
</table>
)
}