showcase-utils.js

import React from 'react';

import {SHOWCASE_LINKS} from '../showcase-links';

export function mapSection(section) {
  const {docsLink, comment, name, componentName} = section;
  const SectionComponent = section.component;
  const linkProps = {
    className: 'docs-link',
    target: '_blank',
    rel: 'noopener noreferrer'
  };
  const exampleLink = SHOWCASE_LINKS[componentName];
  return (
    <section key={`${name}-index`}>
      <div className="section-header">
        {name && <h3 className="section-title">{name}</h3>}
        <div className="flex">
          {exampleLink && (
            <a {...linkProps} href={exampleLink}>
              {' '}
              View Code
            </a>
          )}
          {docsLink && (
            <a {...linkProps} href={docsLink}>
              {' '}
              Documentation{' '}
            </a>
          )}
        </div>
      </div>
      {comment && <p className="docs-comment">{comment}</p>}
      <SectionComponent />
    </section>
  );
}