p5.js-web-editor/client/modules/IDE/components/ShareModal.jsx

51 lines
1.4 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
import { withTranslation } from 'react-i18next';
2017-10-30 19:38:41 +01:00
import CopyableInput from './CopyableInput';
2017-10-30 19:38:41 +01:00
class ShareModal extends React.PureComponent {
render() {
const {
projectId,
ownerUsername,
projectName
} = this.props;
const hostname = window.location.origin;
return (
<div className="share-modal">
<h3 className="share-modal__project-name">
{projectName}
</h3>
<CopyableInput
label={this.props.t('ShareModal.Embed')}
value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
/>
2019-01-16 18:35:34 +01:00
<CopyableInput
label={this.props.t('ShareModal.Present')}
2019-01-16 18:35:34 +01:00
hasPreviewLink
value={`${hostname}/${ownerUsername}/present/${projectId}`}
/>
2017-10-30 19:38:41 +01:00
<CopyableInput
label={this.props.t('ShareModal.Fullscreen')}
hasPreviewLink
value={`${hostname}/${ownerUsername}/full/${projectId}`}
/>
2017-10-30 19:38:41 +01:00
<CopyableInput
label={this.props.t('ShareModal.Edit')}
2019-01-16 18:35:34 +01:00
hasPreviewLink
value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
/>
</div>
2017-10-30 19:38:41 +01:00
);
}
2016-09-07 04:37:29 +02:00
}
ShareModal.propTypes = {
projectId: PropTypes.string.isRequired,
2017-10-30 19:38:41 +01:00
ownerUsername: PropTypes.string.isRequired,
projectName: PropTypes.string.isRequired,
t: PropTypes.func.isRequired
2016-09-07 04:37:29 +02:00
};
export default withTranslation()(ShareModal);