@bigfishtv/cockpit/src/components/preview/PreviewToolbar.js

import React, { Component } from 'react'

import RadioButtonGroup from '../input/RadioButtonGroupInput'
import DateTimeInput from '../input/DateTimeInput'

const deviceWidths = [
	{
		text: 'XS',
		value: 375,
	},
	{
		text: 'S',
		value: 768,
	},
	{
		text: 'M',
		value: 1024,
	},
	{
		text: 'L',
		value: 1280,
	},
	{
		text: 'XL',
		value: 1680,
	},
	{
		text: 'Auto',
		value: '100%',
	},
]

export default class PreviewToolbar extends Component {
	render() {
		return (
			<div className="preview-toolbar">
				<label className="preview-toolbar-label">Device Width</label>
				<RadioButtonGroup
					options={deviceWidths}
					value={this.props.deviceWidth}
					onChange={this.props.onDeviceWidthChange}
				/>
				<label className="preview-toolbar-label">Date</label>
				<DateTimeInput value={this.props.date} onChange={this.props.onDateChange} />
			</div>
		)
	}
}