cfenzo/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
  <style type="text/css">
    .sideBar {
      position:fixed;
      left:0;
      bottom:0;
      right:0;
      background: #333;
      color: #fff;
    }
    .sideBar a {
      color: inherit;
    }
    .sideBar .appNav {
      list-style:none;
      display:flex;
      justify-content: space-around;
      padding:0;
    }

    /* tabs */
    .tabs {
      display: flex;

      border-bottom: 1px solid #D7DBDD;
    }
      .tab {
        cursor: pointer;
        padding: 5px 30px;
        color: #16A2D7;
        font-size: 12px;
        border-bottom: 2px solid transparent;
      }

      .tab.is-tab-selected {
        border-bottom-color: #4EBBE4;
      }
    /* action-bar */
    .actionBar {
      /**
       * Lay out the children of this container with
       * flexbox, which is horizontal by default.
       */
      display: flex;

      /**
       * Make the container put as much space as possible
       * between its children, with the children at either
       * end laying flush against the container's edges.
       */
      justify-content: space-between;

      padding: 10px;
    }

      .actionBar__section {
        /**
         * Lay out the children of this container with
         * flexbox.
         */
        display: flex;

        /**
         * Align the children in the center, along
         * the main axis. By default the children will
         * align along their top edges.
         */
        align-items: center;
      }
  </style>
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from 'react'
import { render } from 'react-dom'
// 1. import a few components
import { MemoryRouter, Match, Miss, Link } from 'react-router'

const PEEPS = [
  { id: 0, name: 'Michelle', friends: [ 1, 2, 3 ] },
  { id: 1, name: 'Sean', friends: [ 0, 3 ] },
  { id: 2, name: 'Kim', friends: [ 0, 1, 3 ], },
  { id: 3, name: 'David', friends: [ 1, 2 ] }
]
const find = (id) => PEEPS.find(p => p.id == id)

const SideBar = () => (
  <div className="sideBar">
    <Nav />
  </div>
)
const Nav = () => (
  <ul className="appNav">
    {/* 3. Link to some paths with `Link` */}
    <li><Link to="/">Home</Link></li>
    <li><Link to="/crm">Crm</Link></li>
    <li><Link to="/sms">Sms</Link></li>
  </ul>
)
const Tab = ({to,children, activeOnlyWhenExact}) => (
  <Link to={to} className="tab" activeClassName="is-tab-selected" activeOnlyWhenExact={activeOnlyWhenExact}>{children}</Link>
)
const Tabs = ({children}) => (
  <div className="tabs">
    {children}
  </div>
)

const App = () => (
  // 2. render a `Router`, it will listen to the url changes
  //    and make the location available to other components
  //    automatically
  <MemoryRouter>
    <div>
      <SideBar />

      <Match exactly pattern="/" component={Dashboard} />
      <Match pattern="/crm" component={Crm} />
      <Match pattern="/sms" component={Sms} />

      <Miss component={NoMatch}/>
    </div>
  </MemoryRouter>
)

const Dashboard = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const NoMatch = ({ location }) => (
  <div>
    <h2>Whoops</h2>
    <p>Sorry but {location.pathname} didn’t match any pages</p>
  </div>
)

const Sms = ({ pathname, pattern }) => (
  // 5. Components rendered by a `Match` get some routing-specific
  //    props, like the portion of the parent `pattern` that was
  //    matched against the current `location.pathname`, in this case
  //    `/topics`
  <div>
    <h2>Sms</h2>
    <Tabs>
      <Tab to={`${pathname}`} activeOnlyWhenExact>Send</Tab>
      <Tab to={`${pathname}/archive`}>Archive</Tab>
      <Tab to={`${pathname}/codewords`}>Codewords</Tab>
    </Tabs>

    <Match pattern={pathname} exactly render={SmsSend}/>
    <Match pattern={`${pathname}/archive`} component={SmsArchive}/>
    <Match pattern={`${pathname}/codewords`} component={SmsCodewords}/>
  </div>
)

const SmsSend = () => (
  <h3>Send sms</h3>
)
const SmsArchive = () => (
  <h3>Archive</h3>
)
const SmsCodewords = () => (
  <h3>Codewords</h3>
)

const Crm = ({ pathname, pattern }) => (
  // 5. Components rendered by a `Match` get some routing-specific
  //    props, like the portion of the parent `pattern` that was
  //    matched against the current `location.pathname`, in this case
  //    `/topics`
  <div>
    <h2>Crm</h2>
    <Tabs>
      <Tab to={`${pathname}`}>Contacts</Tab>
    </Tabs>

    <Match pattern={pathname} exactly render={CrmContacts}/>
    <Match pattern={`${pathname}/:id`} component={Contact}/>
  </div>
)

const CrmContacts = ({pathname}) => (
  <div>
    <h3>Contacts</h3>
    <ul>
      {PEEPS.map((person) => (
        <li key={person.id}><Link to={`${pathname}/${person.id}`}>{person.name}</Link></li>
      ))}
    </ul>
  </div>
)

const Contact = ({pathname, params}) => {
  const person = find(params.id)

  return (<div>
    <h3>{person.name}</h3>
    <ContactActionbar person={person} />
    <ContactInfocard person={person} />
    <Tabs>
      <Tab to={pathname} activeOnlyWhenExact>Timeline</Tab>
      <Tab to={`${pathname}/notes`}>Notes</Tab>
      <Tab to={`${pathname}/events`}>Events</Tab>
      <Tab to={`${pathname}/tasks`}>Tasks</Tab>
      <Tab to={`${pathname}/deals`}>Deals</Tab>
      <Tab to={`${pathname}/campaigns`}>Campaigns</Tab>
      <Tab to={`${pathname}/stats`}>Stats</Tab>
      <Tab to={`${pathname}/mail`}>Mail</Tab>
      <Tab to={`${pathname}/documents`}>Documents</Tab>
    </Tabs>

    <Match pattern={pathname} exactly render={() => (
      <h3>Timeline</h3>
    )} />
    <Match pattern={`${pathname}/:content`} render={({params}) => (
      <h3>{params.content}</h3>
    )}/>
  </div>)
}

const ContactActionbar = ({person, pathname}) => (
  <div className="actionBar">
    <div className="actionBar__section">
      <button>Send ...</button>
      <button>Actions ...</button>
    </div>
  </div>
)
const ContactInfocard = ({person, pathname}) => (
  <div>ContactInfocard</div>
)

render(<App/>, document.querySelector('#root'))

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.3.1",
    "react-dom": "15.3.1",
    "react-router": "4.0.0-alpha.4"
  }
}

## transpiled.js
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactRouter = require('react-router');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var PEEPS = [{ id: 0, name: 'Michelle', friends: [1, 2, 3] }, { id: 1, name: 'Sean', friends: [0, 3] }, { id: 2, name: 'Kim', friends: [0, 1, 3] }, { id: 3, name: 'David', friends: [1, 2] }];
// 1. import a few components
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var find = function find(id) {
  return PEEPS.find(function (p) {
    return p.id == id;
  });
};

var SideBar = function SideBar() {
  return _react2.default.createElement(
    'div',
    { className: 'sideBar' },
    _react2.default.createElement(Nav, null)
  );
};
var Nav = function Nav() {
  return _react2.default.createElement(
    'ul',
    { className: 'appNav' },
    _react2.default.createElement(
      'li',
      null,
      _react2.default.createElement(
        _reactRouter.Link,
        { to: '/' },
        'Home'
      )
    ),
    _react2.default.createElement(
      'li',
      null,
      _react2.default.createElement(
        _reactRouter.Link,
        { to: '/crm' },
        'Crm'
      )
    ),
    _react2.default.createElement(
      'li',
      null,
      _react2.default.createElement(
        _reactRouter.Link,
        { to: '/sms' },
        'Sms'
      )
    )
  );
};
var Tab = function Tab(_ref) {
  var to = _ref.to;
  var children = _ref.children;
  var activeOnlyWhenExact = _ref.activeOnlyWhenExact;
  return _react2.default.createElement(
    _reactRouter.Link,
    { to: to, className: 'tab', activeClassName: 'is-tab-selected', activeOnlyWhenExact: activeOnlyWhenExact },
    children
  );
};
var Tabs = function Tabs(_ref2) {
  var children = _ref2.children;
  return _react2.default.createElement(
    'div',
    { className: 'tabs' },
    children
  );
};

var App = function App() {
  return(
    // 2. render a `Router`, it will listen to the url changes
    //    and make the location available to other components
    //    automatically
    _react2.default.createElement(
      _reactRouter.MemoryRouter,
      null,
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(SideBar, null),
        _react2.default.createElement(_reactRouter.Match, { exactly: true, pattern: '/', component: Dashboard }),
        _react2.default.createElement(_reactRouter.Match, { pattern: '/crm', component: Crm }),
        _react2.default.createElement(_reactRouter.Match, { pattern: '/sms', component: Sms }),
        _react2.default.createElement(_reactRouter.Miss, { component: NoMatch })
      )
    )
  );
};

var Dashboard = function Dashboard() {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h2',
      null,
      'Home'
    )
  );
};

var NoMatch = function NoMatch(_ref3) {
  var location = _ref3.location;
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h2',
      null,
      'Whoops'
    ),
    _react2.default.createElement(
      'p',
      null,
      'Sorry but ',
      location.pathname,
      ' didn’t match any pages'
    )
  );
};

var Sms = function Sms(_ref4) {
  var pathname = _ref4.pathname;
  var pattern = _ref4.pattern;
  return(
    // 5. Components rendered by a `Match` get some routing-specific
    //    props, like the portion of the parent `pattern` that was
    //    matched against the current `location.pathname`, in this case
    //    `/topics`
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'h2',
        null,
        'Sms'
      ),
      _react2.default.createElement(
        Tabs,
        null,
        _react2.default.createElement(
          Tab,
          { to: '' + pathname, activeOnlyWhenExact: true },
          'Send'
        ),
        _react2.default.createElement(
          Tab,
          { to: pathname + '/archive' },
          'Archive'
        ),
        _react2.default.createElement(
          Tab,
          { to: pathname + '/codewords' },
          'Codewords'
        )
      ),
      _react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: SmsSend }),
      _react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/archive', component: SmsArchive }),
      _react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/codewords', component: SmsCodewords })
    )
  );
};

var SmsSend = function SmsSend() {
  return _react2.default.createElement(
    'h3',
    null,
    'Send sms'
  );
};
var SmsArchive = function SmsArchive() {
  return _react2.default.createElement(
    'h3',
    null,
    'Archive'
  );
};
var SmsCodewords = function SmsCodewords() {
  return _react2.default.createElement(
    'h3',
    null,
    'Codewords'
  );
};

var Crm = function Crm(_ref5) {
  var pathname = _ref5.pathname;
  var pattern = _ref5.pattern;
  return(
    // 5. Components rendered by a `Match` get some routing-specific
    //    props, like the portion of the parent `pattern` that was
    //    matched against the current `location.pathname`, in this case
    //    `/topics`
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'h2',
        null,
        'Crm'
      ),
      _react2.default.createElement(
        Tabs,
        null,
        _react2.default.createElement(
          Tab,
          { to: '' + pathname },
          'Contacts'
        )
      ),
      _react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: CrmContacts }),
      _react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/:id', component: Contact })
    )
  );
};

var CrmContacts = function CrmContacts(_ref6) {
  var pathname = _ref6.pathname;
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h3',
      null,
      'Contacts'
    ),
    _react2.default.createElement(
      'ul',
      null,
      PEEPS.map(function (person) {
        return _react2.default.createElement(
          'li',
          { key: person.id },
          _react2.default.createElement(
            _reactRouter.Link,
            { to: pathname + '/' + person.id },
            person.name
          )
        );
      })
    )
  );
};

var Contact = function Contact(_ref7) {
  var pathname = _ref7.pathname;
  var params = _ref7.params;

  var person = find(params.id);

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'h3',
      null,
      person.name
    ),
    _react2.default.createElement(ContactActionbar, { person: person }),
    _react2.default.createElement(ContactInfocard, { person: person }),
    _react2.default.createElement(
      Tabs,
      null,
      _react2.default.createElement(
        Tab,
        { to: pathname, activeOnlyWhenExact: true },
        'Timeline'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/notes' },
        'Notes'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/events' },
        'Events'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/tasks' },
        'Tasks'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/deals' },
        'Deals'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/campaigns' },
        'Campaigns'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/stats' },
        'Stats'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/mail' },
        'Mail'
      ),
      _react2.default.createElement(
        Tab,
        { to: pathname + '/documents' },
        'Documents'
      )
    ),
    _react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: function render() {
        return _react2.default.createElement(
          'h3',
          null,
          'Timeline'
        );
      } }),
    _react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/:content', render: function render(_ref8) {
        var params = _ref8.params;
        return _react2.default.createElement(
          'h3',
          null,
          params.content
        );
      } })
  );
};

var ContactActionbar = function ContactActionbar(_ref9) {
  var person = _ref9.person;
  var pathname = _ref9.pathname;
  return _react2.default.createElement(
    'div',
    { className: 'actionBar' },
    _react2.default.createElement(
      'div',
      { className: 'actionBar__section' },
      _react2.default.createElement(
        'button',
        null,
        'Send ...'
      ),
      _react2.default.createElement(
        'button',
        null,
        'Actions ...'
      )
    )
  );
};
var ContactInfocard = function ContactInfocard(_ref10) {
  var person = _ref10.person;
  var pathname = _ref10.pathname;
  return _react2.default.createElement(
    'div',
    null,
    'ContactInfocard'
  );
};

(0, _reactDom.render)(_react2.default.createElement(App, null), document.querySelector('#root'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	<style type="text/css">
	.sideBar {
	position:fixed;
	left:0;
	bottom:0;
	right:0;
	background: #333;
	color: #fff;
	}
	.sideBar a {
	color: inherit;
	}
	.sideBar .appNav {
	list-style:none;
	display:flex;
	justify-content: space-around;
	padding:0;
	}

	/* tabs */
	.tabs {
	display: flex;

	border-bottom: 1px solid #D7DBDD;
	}
	.tab {
	cursor: pointer;
	padding: 5px 30px;
	color: #16A2D7;
	font-size: 12px;
	border-bottom: 2px solid transparent;
	}

	.tab.is-tab-selected {
	border-bottom-color: #4EBBE4;
	}
	/* action-bar */
	.actionBar {
	/**
	* Lay out the children of this container with
	* flexbox, which is horizontal by default.
	*/
	display: flex;

	/**
	* Make the container put as much space as possible
	* between its children, with the children at either
	* end laying flush against the container's edges.
	*/
	justify-content: space-between;

	padding: 10px;
	}

	.actionBar__section {
	/**
	* Lay out the children of this container with
	* flexbox.
	*/
	display: flex;

	/**
	* Align the children in the center, along
	* the main axis. By default the children will
	* align along their top edges.
	*/
	align-items: center;
	}
	</style>
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="root"></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import React from 'react'
	import { render } from 'react-dom'
	// 1. import a few components
	import { MemoryRouter, Match, Miss, Link } from 'react-router'

	const PEEPS = [
	{ id: 0, name: 'Michelle', friends: [ 1, 2, 3 ] },
	{ id: 1, name: 'Sean', friends: [ 0, 3 ] },
	{ id: 2, name: 'Kim', friends: [ 0, 1, 3 ], },
	{ id: 3, name: 'David', friends: [ 1, 2 ] }
	]
	const find = (id) => PEEPS.find(p => p.id == id)

	const SideBar = () => (
	<div className="sideBar">
	<Nav />
	</div>
	)
	const Nav = () => (
	<ul className="appNav">
	{/* 3. Link to some paths with `Link` */}
	<li><Link to="/">Home</Link></li>
	<li><Link to="/crm">Crm</Link></li>
	<li><Link to="/sms">Sms</Link></li>
	</ul>
	)
	const Tab = ({to,children, activeOnlyWhenExact}) => (
	<Link to={to} className="tab" activeClassName="is-tab-selected" activeOnlyWhenExact={activeOnlyWhenExact}>{children}</Link>
	)
	const Tabs = ({children}) => (
	<div className="tabs">
	{children}
	</div>
	)

	const App = () => (
	// 2. render a `Router`, it will listen to the url changes
	// and make the location available to other components
	// automatically
	<MemoryRouter>
	<div>
	<SideBar />

	<Match exactly pattern="/" component={Dashboard} />
	<Match pattern="/crm" component={Crm} />
	<Match pattern="/sms" component={Sms} />

	<Miss component={NoMatch}/>
	</div>
	</MemoryRouter>
	)

	const Dashboard = () => (
	<div>
	<h2>Home</h2>
	</div>
	)

	const NoMatch = ({ location }) => (
	<div>
	<h2>Whoops</h2>
	<p>Sorry but {location.pathname} didn’t match any pages</p>
	</div>
	)

	const Sms = ({ pathname, pattern }) => (
	// 5. Components rendered by a `Match` get some routing-specific
	// props, like the portion of the parent `pattern` that was
	// matched against the current `location.pathname`, in this case
	// `/topics`
	<div>
	<h2>Sms</h2>
	<Tabs>
	<Tab to={`${pathname}`} activeOnlyWhenExact>Send</Tab>
	<Tab to={`${pathname}/archive`}>Archive</Tab>
	<Tab to={`${pathname}/codewords`}>Codewords</Tab>
	</Tabs>

	<Match pattern={pathname} exactly render={SmsSend}/>
	<Match pattern={`${pathname}/archive`} component={SmsArchive}/>
	<Match pattern={`${pathname}/codewords`} component={SmsCodewords}/>
	</div>
	)

	const SmsSend = () => (
	<h3>Send sms</h3>
	)
	const SmsArchive = () => (
	<h3>Archive</h3>
	)
	const SmsCodewords = () => (
	<h3>Codewords</h3>
	)

	const Crm = ({ pathname, pattern }) => (
	// 5. Components rendered by a `Match` get some routing-specific
	// props, like the portion of the parent `pattern` that was
	// matched against the current `location.pathname`, in this case
	// `/topics`
	<div>
	<h2>Crm</h2>
	<Tabs>
	<Tab to={`${pathname}`}>Contacts</Tab>
	</Tabs>

	<Match pattern={pathname} exactly render={CrmContacts}/>
	<Match pattern={`${pathname}/:id`} component={Contact}/>
	</div>
	)

	const CrmContacts = ({pathname}) => (
	<div>
	<h3>Contacts</h3>
	<ul>
	{PEEPS.map((person) => (
	<li key={person.id}><Link to={`${pathname}/${person.id}`}>{person.name}</Link></li>
	))}
	</ul>
	</div>
	)

	const Contact = ({pathname, params}) => {
	const person = find(params.id)

	return (<div>
	<h3>{person.name}</h3>
	<ContactActionbar person={person} />
	<ContactInfocard person={person} />
	<Tabs>
	<Tab to={pathname} activeOnlyWhenExact>Timeline</Tab>
	<Tab to={`${pathname}/notes`}>Notes</Tab>
	<Tab to={`${pathname}/events`}>Events</Tab>
	<Tab to={`${pathname}/tasks`}>Tasks</Tab>
	<Tab to={`${pathname}/deals`}>Deals</Tab>
	<Tab to={`${pathname}/campaigns`}>Campaigns</Tab>
	<Tab to={`${pathname}/stats`}>Stats</Tab>
	<Tab to={`${pathname}/mail`}>Mail</Tab>
	<Tab to={`${pathname}/documents`}>Documents</Tab>
	</Tabs>

	<Match pattern={pathname} exactly render={() => (
	<h3>Timeline</h3>
	)} />
	<Match pattern={`${pathname}/:content`} render={({params}) => (
	<h3>{params.content}</h3>
	)}/>
	</div>)
	}

	const ContactActionbar = ({person, pathname}) => (
	<div className="actionBar">
	<div className="actionBar__section">
	<button>Send ...</button>
	<button>Actions ...</button>
	</div>
	</div>
	)
	const ContactInfocard = ({person, pathname}) => (
	<div>ContactInfocard</div>
	)

	render(<App/>, document.querySelector('#root'))
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.3.1",
	"react-dom": "15.3.1",
	"react-router": "4.0.0-alpha.4"
	}
	}
	'use strict';

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactRouter = require('react-router');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var PEEPS = [{ id: 0, name: 'Michelle', friends: [1, 2, 3] }, { id: 1, name: 'Sean', friends: [0, 3] }, { id: 2, name: 'Kim', friends: [0, 1, 3] }, { id: 3, name: 'David', friends: [1, 2] }];
	// 1. import a few components
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var find = function find(id) {
	return PEEPS.find(function (p) {
	return p.id == id;
	});
	};

	var SideBar = function SideBar() {
	return _react2.default.createElement(
	'div',
	{ className: 'sideBar' },
	_react2.default.createElement(Nav, null)
	);
	};
	var Nav = function Nav() {
	return _react2.default.createElement(
	'ul',
	{ className: 'appNav' },
	_react2.default.createElement(
	'li',
	null,
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/' },
	'Home'
	)
	),
	_react2.default.createElement(
	'li',
	null,
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/crm' },
	'Crm'
	)
	),
	_react2.default.createElement(
	'li',
	null,
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/sms' },
	'Sms'
	)
	)
	);
	};
	var Tab = function Tab(_ref) {
	var to = _ref.to;
	var children = _ref.children;
	var activeOnlyWhenExact = _ref.activeOnlyWhenExact;
	return _react2.default.createElement(
	_reactRouter.Link,
	{ to: to, className: 'tab', activeClassName: 'is-tab-selected', activeOnlyWhenExact: activeOnlyWhenExact },
	children
	);
	};
	var Tabs = function Tabs(_ref2) {
	var children = _ref2.children;
	return _react2.default.createElement(
	'div',
	{ className: 'tabs' },
	children
	);
	};

	var App = function App() {
	return(
	// 2. render a `Router`, it will listen to the url changes
	// and make the location available to other components
	// automatically
	_react2.default.createElement(
	_reactRouter.MemoryRouter,
	null,
	_react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(SideBar, null),
	_react2.default.createElement(_reactRouter.Match, { exactly: true, pattern: '/', component: Dashboard }),
	_react2.default.createElement(_reactRouter.Match, { pattern: '/crm', component: Crm }),
	_react2.default.createElement(_reactRouter.Match, { pattern: '/sms', component: Sms }),
	_react2.default.createElement(_reactRouter.Miss, { component: NoMatch })
	)
	)
	);
	};

	var Dashboard = function Dashboard() {
	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h2',
	null,
	'Home'
	)
	);
	};

	var NoMatch = function NoMatch(_ref3) {
	var location = _ref3.location;
	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h2',
	null,
	'Whoops'
	),
	_react2.default.createElement(
	'p',
	null,
	'Sorry but ',
	location.pathname,
	' didn’t match any pages'
	)
	);
	};

	var Sms = function Sms(_ref4) {
	var pathname = _ref4.pathname;
	var pattern = _ref4.pattern;
	return(
	// 5. Components rendered by a `Match` get some routing-specific
	// props, like the portion of the parent `pattern` that was
	// matched against the current `location.pathname`, in this case
	// `/topics`
	_react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h2',
	null,
	'Sms'
	),
	_react2.default.createElement(
	Tabs,
	null,
	_react2.default.createElement(
	Tab,
	{ to: '' + pathname, activeOnlyWhenExact: true },
	'Send'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/archive' },
	'Archive'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/codewords' },
	'Codewords'
	)
	),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: SmsSend }),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/archive', component: SmsArchive }),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/codewords', component: SmsCodewords })
	)
	);
	};

	var SmsSend = function SmsSend() {
	return _react2.default.createElement(
	'h3',
	null,
	'Send sms'
	);
	};
	var SmsArchive = function SmsArchive() {
	return _react2.default.createElement(
	'h3',
	null,
	'Archive'
	);
	};
	var SmsCodewords = function SmsCodewords() {
	return _react2.default.createElement(
	'h3',
	null,
	'Codewords'
	);
	};

	var Crm = function Crm(_ref5) {
	var pathname = _ref5.pathname;
	var pattern = _ref5.pattern;
	return(
	// 5. Components rendered by a `Match` get some routing-specific
	// props, like the portion of the parent `pattern` that was
	// matched against the current `location.pathname`, in this case
	// `/topics`
	_react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h2',
	null,
	'Crm'
	),
	_react2.default.createElement(
	Tabs,
	null,
	_react2.default.createElement(
	Tab,
	{ to: '' + pathname },
	'Contacts'
	)
	),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: CrmContacts }),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/:id', component: Contact })
	)
	);
	};

	var CrmContacts = function CrmContacts(_ref6) {
	var pathname = _ref6.pathname;
	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h3',
	null,
	'Contacts'
	),
	_react2.default.createElement(
	'ul',
	null,
	PEEPS.map(function (person) {
	return _react2.default.createElement(
	'li',
	{ key: person.id },
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: pathname + '/' + person.id },
	person.name
	)
	);
	})
	)
	);
	};

	var Contact = function Contact(_ref7) {
	var pathname = _ref7.pathname;
	var params = _ref7.params;

	var person = find(params.id);

	return _react2.default.createElement(
	'div',
	null,
	_react2.default.createElement(
	'h3',
	null,
	person.name
	),
	_react2.default.createElement(ContactActionbar, { person: person }),
	_react2.default.createElement(ContactInfocard, { person: person }),
	_react2.default.createElement(
	Tabs,
	null,
	_react2.default.createElement(
	Tab,
	{ to: pathname, activeOnlyWhenExact: true },
	'Timeline'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/notes' },
	'Notes'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/events' },
	'Events'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/tasks' },
	'Tasks'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/deals' },
	'Deals'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/campaigns' },
	'Campaigns'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/stats' },
	'Stats'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/mail' },
	'Mail'
	),
	_react2.default.createElement(
	Tab,
	{ to: pathname + '/documents' },
	'Documents'
	)
	),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: function render() {
	return _react2.default.createElement(
	'h3',
	null,
	'Timeline'
	);
	} }),
	_react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/:content', render: function render(_ref8) {
	var params = _ref8.params;
	return _react2.default.createElement(
	'h3',
	null,
	params.content
	);
	} })
	);
	};

	var ContactActionbar = function ContactActionbar(_ref9) {
	var person = _ref9.person;
	var pathname = _ref9.pathname;
	return _react2.default.createElement(
	'div',
	{ className: 'actionBar' },
	_react2.default.createElement(
	'div',
	{ className: 'actionBar__section' },
	_react2.default.createElement(
	'button',
	null,
	'Send ...'
	),
	_react2.default.createElement(
	'button',
	null,
	'Actions ...'
	)
	)
	);
	};
	var ContactInfocard = function ContactInfocard(_ref10) {
	var person = _ref10.person;
	var pathname = _ref10.pathname;
	return _react2.default.createElement(
	'div',
	null,
	'ContactInfocard'
	);
	};

	(0, _reactDom.render)(_react2.default.createElement(App, null), document.querySelector('#root'));