export default function Header(): Stream<VNode> { return xs.of( header('.main-header', {}, [ // Profile picture // Contact information h1('.my-name', {}, 'Michal Vanko'), h2('.job-title', {}, 'Software developer') ]) ) }
function vTitle() { return div('#title', [ h1([ img({props: {src: 'Rx_Logo_S.png'}}), a( {props: {href: 'https://github.com/wizardwerdna/FRPBowlingKata'}}, 'FRP Bowling' ), img({props: {src: 'CycleJS_Logo.png'}}), ]), h3('The Classic Kata in RxJS and CycleJS') ]); }
return state$.map(({shows, cursor}) => { const rows = shows.map((show, i) => { return tr(i === cursor ? '.table-info' : '', [ td([show.name]), td([show.count]) ]); }); const showsTable = div('.col-md-6 .col-sm-12', [ table('.table', [ tbody('.showsTableBody', rows) ]) ]); return div([ h1(["tracker"]), showsTable ]) });
).map(([ scoreDom, newGameDom, gridDom ]) => { return div('#root', [ div('.container', [ header([ div('.title.bar', [ h1(['Recall']), scoreDom ]), div('.info', [ p([ 'Click on the ', strong(['nine tiles you see']), ' to win!' ]), newGameDom ]) ]), main([ div('.panel', [gridDom]) ]), footer([ 'Made with ', span('.heart', '❤'), ' using ', span('.cycle', 'Cycle.js'), ' by ', a('.author', { props: { href: 'https://github.com/artfuldev' } }, '@artfuldev'), div([ a('.source', { props: { href: 'https://github.com/artfuldev/recall-cycle/tree/gh-pages/' } }, 'View Source') ]) ]) ]) ]); });
function renderInvalidState() { return div(`.${invalidStateStyle}`, [ h1('Not a Cycle.js app with xstream'), p('This page doesn\'t seem to be running a Cycle.js app using xstream ' + 'as the stream library. This DevTool only supports xstream. Or maybe ' + 'you are using xstream but an older version.'), p('This DevTool requires that your app is built using the following ' + 'packages:'), ul([ li([ pre('xstream'), ' v6.1.x or higher' ]), li([ pre('@cycle/run'), ' v3.1.x or higher' ]), li([ pre('@cycle/dom'), ' v12.2.x or higher, if you are using it' ]), li([ pre('@cycle/http'), ' v10.2.x or higher, if you are using it' ]), ]), p([ 'Need help? The ', a({ attrs: { href: 'https://gitter.im/cyclejs/cyclejs', target: '_blank', }}, 'chat'), ' is usually friendly and helpful.', ]), ]); }
function homeView(projects: Project[]): VNode { return div(".welcome", [ h1("Helix Pi"), div(".options", [ a(".new-project", "Create new project"), div(".recent-projects", [ h2("Recent projects"), div( ".projects.flex-column", projects.map(project => a( ".goto-project", { attrs: { href: `/project/${project.id}` } }, project.name ) ) ) ]) ]) ]); }
DOM: xs.periodic(1000).map(i => h1('' + i + " seconds elapsed"))