{"size": 627, "ext": "js", "max_stars_repo_path": "ui/src/components/Tag/TagPreview.js", "max_stars_repo_name": "hotstone-seo/hotstone-server", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "ui/src/components/Tag/TagPreview.js", "max_issues_repo_name": "hotstone-seo/hotstone-server", "max_issues_repo_issues_event_min_datetime": "2020-02-05T04:26:47.000Z", "max_issues_repo_issues_event_max_datetime": "2020-05-29T02:53:55.000Z", "max_forks_repo_path": "ui/src/components/Tag/TagPreview.js", "max_forks_repo_name": "hotstone-seo/hotstone-server", "max_forks_repo_forks_event_min_datetime": "2020-03-27T06:09:08.000Z", "max_forks_repo_forks_event_max_datetime": "2020-03-27T06:09:08.000Z"}
{"max_stars_count": null, "max_issues_count": 73, "max_forks_count": 1, "avg_line_length": 22.3928571429, "max_line_length": 75, "alphanum_fraction": 0.6427432217}
import React from 'react';
import PropTypes from 'prop-types';
import { renderToStaticMarkup } from 'react-dom/server';

function TagPreview({ tag }) {
  const { type, attributes, value } = tag;
  if (!type) {
    return null;
  }
  return (
    <pre data-testid="text-preview-tag" style={{ margin: 0 }}>
      {renderToStaticMarkup(
        React.createElement(type, attributes, value === '' ? null : value),
      )}
    </pre>
  );
}

TagPreview.propTypes = {
  tag: PropTypes.shape({
    type: PropTypes.string,
    attributes: PropTypes.object,
    value: PropTypes.string,
  }).isRequired,
};

export default TagPreview;
