File.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import styled from 'styled-components'
  2. import { endpoint } from '../config'
  3. const ImageStyle = styled.div`
  4. display: grid;
  5. grid-template-columns: 250px 100px 1fr;
  6. grid-auto-flow: dense;
  7. align-items: start;
  8. justify-items: start;
  9. align-content: start;
  10. justify-content: start;
  11. a,
  12. img {
  13. grid-row: span 6;
  14. max-width: 230px;
  15. max-height: 140px;
  16. justify-self: center;
  17. }
  18. h2 {
  19. grid-column: span 2;
  20. margin: 0 0 0.5em 0;
  21. line-height: 1;
  22. }
  23. .description {
  24. grid-column: span 2;
  25. }
  26. p {
  27. margin: 0;
  28. line-height: 1.5;
  29. }
  30. `
  31. const File = props => {
  32. const { path, name, description, filename, mimetype, size } = props.data
  33. const downloadPath = `${endpoint}/${path}`
  34. return (
  35. <ImageStyle>
  36. {mimetype.startsWith('image/') ? (
  37. <img src={downloadPath} alt={description} />
  38. ) : (
  39. <a href={downloadPath}>
  40. <img src={`${endpoint}/static/document-download-solid.png`} alt={description} width={75} />
  41. </a>
  42. )}
  43. <h2>{name}</h2>
  44. <p className='description'>{description}</p>
  45. <p>Path</p><p><a href={downloadPath}>{downloadPath}</a></p>
  46. <p>Filename</p><p>{filename}</p>
  47. <p>MIME Type</p><p>{mimetype}</p>
  48. <p>Size</p><p>{size}</p>
  49. </ImageStyle>
  50. )
  51. }
  52. export default File