Spaces:
Running
Running
File size: 2,594 Bytes
f2bee8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
import Dots from './dots.jsx';
import bluetoothIcon from './icons/bluetooth-white.svg';
import styles from './connection-modal.css';
import classNames from 'classnames';
const ConnectedStep = props => (
<Box className={styles.body}>
<Box className={styles.activityArea}>
<Box className={styles.centeredRow}>
<div className={styles.peripheralActivity}>
<img
className={styles.peripheralActivityIcon}
src={props.connectionIconURL}
/>
<img
className={styles.bluetoothConnectedIcon}
src={bluetoothIcon}
/>
</div>
</Box>
</Box>
<Box className={styles.bottomArea}>
<Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage
defaultMessage="Connected"
description="Message indicating that a device was connected"
id="gui.connection.connected"
/>
</Box>
<Dots
success
className={styles.bottomAreaItem}
total={3}
/>
<div className={classNames(styles.bottomAreaItem, styles.cornerButtons)}>
<button
className={classNames(styles.redButton, styles.connectionButton)}
onClick={props.onDisconnect}
>
<FormattedMessage
defaultMessage="Disconnect"
description="Button to disconnect the device"
id="gui.connection.disconnect"
/>
</button>
<button
className={styles.connectionButton}
onClick={props.onCancel}
>
<FormattedMessage
defaultMessage="Go to Editor"
description="Button to return to the editor"
id="gui.connection.go-to-editor"
/>
</button>
</div>
</Box>
</Box>
);
ConnectedStep.propTypes = {
connectionIconURL: PropTypes.string.isRequired,
onCancel: PropTypes.func,
onDisconnect: PropTypes.func
};
export default ConnectedStep;
|