Websites/browserbench.org/Speedometer2.0/resources/todomvc/architecture-examples/inferno/src/base.js

   1 import Inferno from 'inferno';
   2 import { states } from './share';
   3
   4 /**
   5  * Stateless Header component
   6  */
   7 export function Head({onEnter}) {
   8     return (
   9         <header className="header">
  10             <h1>todos</h1>
  11             <input className="new-todo" autofocus onkeydown={ onEnter }
  12                 autocomplete="off" placeholder="What needs to be done?"
  13             />
  14         </header>
  15     );
  16 }
  17
  18 export const links = [
  19     {hash: '#/', name: 'All'},
  20     {hash: '#/active', name: 'Active'},
  21     {hash: '#/completed', name: 'Completed'}
  22 ];
  23
  24 /**
  25  * Stateless Footer component
  26  */
  27 export function Foot({left, done, route, onClear}) {
  28     return (
  29         <footer className="footer">
  30                 <span className="todo-count">
  31                     <strong>{ left }</strong> { left > 1 ? 'items' : 'item' } left
  32                 </span>
  33                 <ul className="filters">
  34                     {
  35                         links.map(({hash, name}) => (
  36                             <li>
  37                                 <a href={ hash } className={ name.toLowerCase() === route ? 'selected' : '' }>
  38                                     { name }
  39                                 </a>
  40                             </li>
  41                         ))
  42                     }
  43                 </ul>
  44                 { done > 0 ? (
  45                     <button className="clear-completed" onClick={ onClear }>Clear completed</button>
  46                 ) : null }
  47             </footer>
  48     );
  49 }