add list item as separate element

src/client.imba

@@ -1,4 +1,5 @@
 import {vbox, completed} from './styles/index.css'
+import { List } from './item-list'
 
 var store = {
 	title: ""
@@ -15,16 +16,11 @@ tag App
 		data:items.push(title: data:title)
 		data:title = ""
 
-	def completeItem item
-		console.log "clicked,{item:completed}"
-		item:completed = !item:completed
-		
 	def render
 		<self.{vbox}>
 			<header>
 				<input[data:title] placeholder="New..." :keyup.enter.addItem>
 				<button :tap.addItem> 'Add item'
-			<ul> for item in data:items
+			<List list=data:items>
-				<li .{item:completed and completed} :tap.completeItem(item)> item:title
 
 Imba.mount <App[store]>

src/item-list.imba

@@ -0,0 +1,11 @@
+export tag List
+	prop list
+
+       def completeItem item
+               console.log "clicked,{item:completed}"
+               item:completed = !item:completed
+
+	def render
+		<self>
+			<ul> for item in list
+					<li .{item:completed} :tap.completeItem(item)> item:title