elements jsx

import React from 'react';

export const Cover = (props) => {
  if (props.src) {
    return <img className="mw-100 w-100 db" src={props.src} alt={props.alt || ''} />;
  } else {
    if (props.alt) {
      return (
        <div className="dt w-100 h-100 ba">
          <div className="dtc v-mid tc f5 ttu tracked pa1">{props.alt}</div>
        </div>
      );
    }
  }

  return null;
};

export const Title = (props) => {
  return <h1 className="f6 mb4 mh1 ttu tracked">{props.title}</h1>;
};

export const DebugData = (props) => {
  return (
    <pre>
      <code
        className="f6"
        dangerouslySetInnerHTML={{__html: JSON.stringify(props.data, null, 2)}}
      />
    </pre>
  );
};


export const Description = (props) => {
  if (props.text) {
    return (
      <div
        className="f4 measure lh-copy pa1 pa4-ns"
        dangerouslySetInnerHTML={{__html: props.text}}
      />
    );
  }

  return null;
};


export const CardImg = (props) => {
  if (props.src) {
    return <img className="mw-100 w-100 br2 db" src={props.src} alt={props.alt || ''} />;
  } else {
    if (props.alt) {
      return (
        <div className="dt w-100 h-100 br2 db br2 ba b--black-10">
          <div className="dtc v-mid tc f5 ttu tracked pa1">{props.alt}</div>
        </div>
      );
    }
  }

  return null;
};


export const ReleaseCard = (props) => {

  const release = props.release;
  // or /release/slug for all
  let link;
  if (release.artist) {
    link = `/${release.artist.slug}/${release.slug}/`;
  }

  return (
    <article
      className="release w5 h5"
    >
      <a href={link} className="link"><CardImg src={release.cover} className="db" alt={release.title} /></a>
    </article>
  );
};


// export const ArtistTile = (props) => {
//
// }