Upload list now displays as a table.
This commit is contained in:
parent
5db464aa1a
commit
14d941fad2
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user