AutoMate/frontend/components/File.js

import styled from 'styled-components'
import { endpoint } from '../config'

const FileStyle = 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 FileFields = {
  id: null,
  name: '',
  description: '',
  file: null
}

const FileFormFields = props => {
  const { state, onChange } = props

  return (
    <fieldset>
      <label htmlFor='name'>Name</label>
      <input type='text' name='name' id='name' placeholder='Name'
        value={state.name}
        onChange={onChange} />
      <label htmlFor='description'>Description</label>
      <textarea name='description' id='description' placeholder='Description'
        value={state.description}
        onChange={onChange} />
      <input type='file' name='file' onChange={onChange} />
    </fieldset>
  )
}

const File = props => {
  const { path, name, description, filename, mimetype, size } = props.data
  const downloadPath = `${endpoint}/${path}`
  return (
    <FileStyle>
      {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>
    </FileStyle>
  )
}

export default File
export { FileFormFields }