phoenix-components-library/react/components/Card WIP/Card.jsx

Component library for Phoenix Frontend Projects.

import React, { Component } from "react";
import PropTypes from "prop-types";
import copy from "copy-to-clipboard";

import "./Card.css";
import "./List.css";

const propTypes = {
  header: {
    name: PropTypes.string,
    baseUrl: PropTypes.string,
    urlPageName: PropTypes.string,
    id: PropTypes.number
  }
};

const defaultProps = {
  header: {
    name: "",
    urlPageName: "",
    baseUrl: "",
    id: null
  }
};

const Content = ({ children }) => (
  <div className="es-card__content">{children}</div>
);

const Item = ({ children }) => <div className="es-card__item">{children}</div>;

const Image = () => <div className="es-card__image-wrapper" />;

class Header extends Component {
  state = {
    copied: false
  };

  copyToClipboard = text => {
    copy(text);
    this.setState({ copied: true });

    setTimeout(() => {
      this.setState({ copied: false });
    }, 1000);
  };

  render() {
    const { name, id, urlPageName, baseUrl } = this.props;
    return (
      <header className="es-card__header">
        <div className="es-card__header-short">
          <a href={`${baseUrl}#!/project/${id}/${urlPageName}`}>
            <h3 className="es-card__name">{name}</h3>
          </a>
        </div>
        <div className="es-card__header-long">
          <a href={`${baseUrl}#!/project/${id}/${urlPageName}`}>
            <h3 className="es-card__name">{name}</h3>
          </a>
          <span
            className="es-copy-to"
            onClick={() => this.copyToClipboard(name)}
            role="button"
          >
            <span className="es-icon-copy" />
            {this.state.copied ? "Copied" : "Copy to clipboard"}
          </span>
        </div>
      </header>
    );
  }
}

const Footer = ({ children }) => (
  <footer className="es-card__footer">{children}</footer>
);

const FooterItem = ({ children }) => (
  <span className="es-card__footer--item">{children}</span>
);

const FooterLine = () => <span className="es-card__footer-separator" />;

const Card = ({ highlighted, active, children }) => (
  <div
    className={`es-card ${active ? " es-card__active" : ""} ${
      highlighted ? " es-card__highlight" : ""
    }`}
  >
    {children}
  </div>
);

Header.propTypes = propTypes.header;
Header.defaultProps = defaultProps.header;
Card.propTypes = propTypes.card;
Card.defaultProps = defaultProps.card;

export { Card, Content, Item, Header, Footer, FooterItem, FooterLine, Image };