global css
	body
		bgc:cool1
		c:gray8
		fs:sm


tag habit-item
	prop name = "Untitled"
	prop done = false	
	
	css
		label
			d:vflex
			ja:center
			g:5px
			fs:xs
			rd:md
			size:70px
			c:cool5
			fw:500
			bgc:cooler2
		
	<self>
		<label>
			<input type="checkbox" checked=done>
			<div> name


tag habit-group
	prop habits = []
	
	css bgc:#fff
		p:10px
		rd:lg
		d:flex
		g:10px
		jc:center
		shadow:0 5px 15px black/20
	
	<self>
		for habit in habits
			<habit-item name=habit.name done=habit.done>






imba.mount <habit-group habits=[
	{name: "Clean Up", done: true}
	{name: "Exercise", done: false}
	{name: "Study", done: true}
]>