1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- import styled from 'styled-components'
- import { endpoint } from '../config'
- const ImageStyle = styled.div`
- display: grid;
- grid-template-columns: 250px 100px 1fr;
- grid-auto-flow: dense;
- align-items: start;
- justify-items: start;
- align-content: start;
- justify-content: start;
- a,
- img {
- grid-row: span 6;
- max-width: 230px;
- max-height: 140px;
- justify-self: center;
- }
- h2 {
- grid-column: span 2;
- margin: 0 0 0.5em 0;
- line-height: 1;
- }
- .description {
- grid-column: span 2;
- }
- p {
- margin: 0;
- line-height: 1.5;
- }
- `
- const File = props => {
- const { path, name, description, filename, mimetype, size } = props.data
- const downloadPath = `${endpoint}/${path}`
- return (
- <ImageStyle>
- {mimetype.startsWith('image/') ? (
- <img src={downloadPath} alt={description} />
- ) : (
- <a href={downloadPath}>
- <img src={`${endpoint}/static/document-download-solid.png`} alt={description} width={75} />
- </a>
- )}
- <h2>{name}</h2>
- <p className='description'>{description}</p>
- <p>Path</p><p><a href={downloadPath}>{downloadPath}</a></p>
- <p>Filename</p><p>{filename}</p>
- <p>MIME Type</p><p>{mimetype}</p>
- <p>Size</p><p>{size}</p>
- </ImageStyle>
- )
- }
- export default File
|