40 lines
940 B
JavaScript
40 lines
940 B
JavaScript
import React from 'react';
|
|
import { PropTypes } from 'prop-types';
|
|
import './style.scss';
|
|
|
|
const WordCloud = props => (
|
|
<div
|
|
className="wordcloud"
|
|
data-index={props.index}
|
|
>
|
|
<div>
|
|
<p className="number">{ (props.index + 1).toString().padStart(3, '0') }</p>
|
|
<h3>{ props.words.title }</h3>
|
|
<div className="words-wrap">
|
|
{ props.words.cloud.map(word => (
|
|
<span
|
|
key={word.word}
|
|
className={`size-${word.size}`}
|
|
>
|
|
{ word.url ?
|
|
(<a href={word.url} target="_blank" rel="noopener noreferrer">{ word.word }</a>) :
|
|
<span>{ word.word }</span>
|
|
}
|
|
</span>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
WordCloud.propTypes = {
|
|
index: PropTypes.number.isRequired,
|
|
words: PropTypes.shape({
|
|
title: PropTypes.string,
|
|
cloud: PropTypes.array,
|
|
}).isRequired,
|
|
};
|
|
|
|
export default WordCloud;
|