43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
JavaScript
|
import React from 'react';
|
||
|
import {
|
||
|
FormMeta,
|
||
|
Button,
|
||
|
Label,
|
||
|
Input,
|
||
|
Small,
|
||
|
FormGroup
|
||
|
} from 'joyent-ui-toolkit';
|
||
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
||
|
import remcalc from 'remcalc';
|
||
|
import { Field } from 'redux-form';
|
||
|
|
||
|
const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
|
||
|
|
||
|
export const Name = ({ handleSubmit, onCancel, dirty }) => (
|
||
|
<form onSubmit={handleSubmit}>
|
||
|
<Row>
|
||
|
<Col xs={12} md={4} lg={4}>
|
||
|
<FormGroup name="name" reduxForm>
|
||
|
<FormMeta left>
|
||
|
<Label>Name the new deployment group</Label>
|
||
|
<Small>
|
||
|
Your services will be deployed to eu-east-1 data center.
|
||
|
</Small>
|
||
|
</FormMeta>
|
||
|
<Input type="text" />
|
||
|
</FormGroup>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
<ButtonsRow>
|
||
|
<Button type="button" onClick={onCancel} secondary>
|
||
|
Cancel
|
||
|
</Button>
|
||
|
<Button type="submit" disabled={!dirty}>
|
||
|
Next
|
||
|
</Button>
|
||
|
</ButtonsRow>
|
||
|
</form>
|
||
|
);
|
||
|
|
||
|
export default Name;
|