portfolio.js

function cleanProjectName(data) {
  let d = data;
  d = d.toString().toLowerCase().replace('1','one-').replace('.','-').split(' ').join('-');
  return d;
}

function Logo(props) {
  let src = props.src;
  let brands = props.brands;
  let dir = 'img/';
  let ext = '.svg';
  let prefix = 'logo-';
  let url = dir + prefix + src + ext;
  return <img src={url} alt={brands} title={brands} />
}

function Highlight(props) {
  let highlight = props.item;
  return <li className="highlight" title={highlight}>{highlight}</li>
}

function Highlights(props) {
  let items = props.items;
  return (
    <ul className="highlights">{items}</ul>
  );
}

function Tag(props) {
  let tag = "#" + props.item;
  return <li className="tag" title={tag}>{tag}</li>
}

function Tags(props) {
  let items = props.items;
  return (
    <ul className="tags">{items}</ul>
  );
}

function Device(props) {
  let device = props.item;
  let deviceTitle = device.charAt(0).toUpperCase() + device.slice(1);
  return <li className={"device " + device} title={deviceTitle}></li>
}

function Devices(props) {
  let items = props.items;
  return (
    <ul className="devices">{items}</ul>
  );
}

function Project(props) {
  let projectName = cleanProjectName(props.item.project);
  let highlights = props.item.highlights;
  highlights = highlights && highlights.map((highlight, index) =>
    <Highlight key={index} item={highlight} />
  )
  let tags = props.item.tags;
  tags = tags && tags.map((tag, index) =>
    <Tag key={index} item={tag} />
  )
  let devices = props.item.devices;
  devices = devices && devices.map((device, index) =>
    <Device key={index} item={device} />
  )
  return (
    <section
      id={projectName}
      className={"panel animated fadeIn " + projectName}
      tabIndex={props.item.id}>
      <div className="panel-inner">
        <h1>
          <span className="project">{props.item.project}</span>
          <span className="brands" title={props.item.brands}>
            <Logo src={props.item.logo} />
          </span>
        </h1>
        <Highlights items={highlights} />
        <Tags items={tags} />
        <Devices items={devices} />
      </div>
    </section>
  )
}

function Portfolio(props) {
  let projects = props.items;
  projects = projects && projects.map((project, index) =>
    <Project key={index} item={project} />
  )
  return (
    <div className="container">
      <ul className="portfolio">{projects}</ul>
      <ul className="portfolio open">{projects}</ul>
    </div>
  );
}