var choo = require('choo')
var html = require('choo/html')
var css = require('sheetify')
var List = require('../list')
// add tailwind
css('tailwindcss/dist/tailwind.css')
var app = choo()
// init component preview
app.use(require('choo-component-preview')())
// store
app.use((state, emitter) => {
state.users = [{
id: 1,
name: 'Jane Doe'
}, {
id: 2,
name: 'Selin Ruhle'
}]
})
// User list component
class UsersList extends List {
static identity () {
return 'users-list' // should be unique within components
}
getItems () {
return this.state.users
}
header () {
return super.header('Users')
}
}
var layout = (view) => (s, e, r) => html `
Choo Content
${view(s, e, r)}
`
// bind a component to a route
app.route('/users', layout((state, emit, render) => render(UsersList)))
// main route
app.route('/', layout(() => html `
- Users
`))
// bootstrap app
app.mount(document.body)