@bigfishtv/cockpit/src/components/asset/AssetSelectControls.js

import React, { Component } from 'react'
import classnames from 'classnames'

import { isArray } from '../../utils/typeUtils'
import Upload from '../upload/Upload'
import AssetSelectButton from '../button/AssetSelectButton'

/**
 * Typically wrapped in a Dropzone component.
 * Displays an Upload button and/or a browse media button
 */
export default class AssetSelectControls extends Component {
	static defaultProps = {
		showBrowse: true,
		showMedia: true,
		size: 'default',
	}

	render() {
		const { showBrowse, showMedia, ...props } = this.props
		const subject = props.subject + (props.multiple ? '(s)' : '')
		return (
			<div className={classnames('upload hide-drag', 'upload-' + props.size)}>
				<h3>Drag {subject} here from hard drive</h3>
				<p>or</p>
				<div className="flex flex-wrap justify-content-center" style={{ gap: '1rem' }}>
					{showBrowse && <Upload {...props} text={'Upload ' + subject} />}
					{showMedia && <AssetSelectButton {...props} text="Select from Media" />}
				</div>
				<p>
					<small>
						Allowed file types: {isArray(props.extensions) ? props.extensions.join(', ') : props.extensions}.
					</small>
				</p>
			</div>
		)
	}
}