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

49 lines
1.5 KiB
JavaScript
Raw Normal View History

2016-09-07 02:37:29 +00:00
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
function ShareModal(props) {
const hostname = window.location.origin;
return (
<section className="share-modal">
<header className="share-modal__header">
<h2>Share Sketch</h2>
<button className="about__exit-button" onClick={props.closeShareModal}>
<InlineSVG src={exitUrl} alt="Close Share Overlay" />
</button>
</header>
<div className="share-modal__section">
<label className="share-modal__label">Embed</label>
<input
type="text"
className="share-modal__input"
value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Fullscreen</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/full/${props.projectId}`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Edit</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/projects/${props.projectId}`}
/>
</div>
</section>
);
}
ShareModal.propTypes = {
projectId: PropTypes.string.isRequired,
closeShareModal: PropTypes.func.isRequired
};
export default ShareModal;