<div id="app"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#28a9dd, #0d4e77);
  font-family: "Share Tech Mono", monospace;
  font-size: 2rem;
}


ul {
  counter-reset: li;
  list-style: none outside none;
  
  li {
    margin: .5em;
    text-shadow: .02em .02em .005em rgba(255, 255, 255, .45);
    
    &::before {
      counter-increment: li;
      content: counter(li);
      padding: .5em;
      background: #000;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      width: 32px;
      height: 32px;
      margin-right: 10px;
      color: #fff;
    }
  }
  
  a {
    text-decoration: none;
    color: #fff;
    
    &:hover {
      background: linear-gradient(to right, #f36, #90f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;  
      transition: all .28s ease;
    }
  }
}

const data = [
  { id: 1, name: 'Dog', legCount: 4, isFriendly: true },
  { id: 2, name: 'Bird', legCount: 2 },
  { id: 3, name: 'Snake', legCount: 0, isFriendly: false },
  { id: 4, name: 'Centipede' }
]

const AnimalCmp = ({ name, url, legCount, friendliness, hasNotEnoughData }) => {
  return (
    <li>
      <a href={url}>{name}</a>:{legCount} legs
      {friendliness && `(${friendliness})`}
      {hasNotEnoughData && '(Not enough data!)'}
    </li>
  )
}

const Animals = ({items}) => {
  return (
    <ul>
      {
        items.map(item => <AnimalCmp
          name={item.name}
          url={`url/animal/${item.id}`}
          legCount={_.toString(item.legCount) || '?'}
          friendliness={{ true: 'Friendly', false: 'Unfriendly' }[item.isFriendly]}
          hasNotEnoughData={item.legCount === undefined && item.isFriendly === undefined}
        />)
      }
    </ul>
  )
}

ReactDOM.render(<Animals items={data} />, document.getElementById('app'))