59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const BodyPreview = ({ previewHTML, version, articleState }) => (
|
|
<div
|
|
className="container"
|
|
style={{
|
|
marginTop: '10px',
|
|
minHeight: '508px',
|
|
overflow: 'hidden',
|
|
boxShadow: '0px 0px 0px #fff',
|
|
border: '0px',
|
|
}}
|
|
>
|
|
{titleArea(version, articleState)}
|
|
<div
|
|
className="body"
|
|
dangerouslySetInnerHTML={{ __html: previewHTML }}
|
|
style={{ width: '90%' }}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
function titleArea(version, articleState) {
|
|
if (version === 'help') {
|
|
// possibly something different here in future.
|
|
return '';
|
|
}
|
|
const tags = articleState.tagList.split(', ').map(tag => {
|
|
return (
|
|
<span>
|
|
<div className="tag">{tag}</div>
|
|
{' '}
|
|
</span>
|
|
);
|
|
});
|
|
return (
|
|
<div className="title" style={{ width: '90%', maxWidth: '1000px' }}>
|
|
<h1>{articleState.title}</h1>
|
|
<h3>
|
|
<img
|
|
className="profile-pic"
|
|
src={window.currentUser.profile_image_90}
|
|
alt="image"
|
|
/>
|
|
|
|
<span>{window.currentUser.name}</span>
|
|
</h3>
|
|
<div className="tags">{tags}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
BodyPreview.propTypes = {
|
|
previewHTML: PropTypes.string.isRequired,
|
|
version: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default BodyPreview;
|