Horizontal Scrolling

class MyApp extends App{
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	categories = [{
		name: `Science Fiction`,
		movieNames: [`Star Wars 1`, `Star Wars 2`, `Star Wars 3`, `Star Wars 4`],
	}, {
		name: `Comedy`,
		movieNames: [`Dumb & Dumber`, `Shrek 1`, `Ace Ventura`],
	}, {
		name: `Disney`,
		movieNames: [`The Lion King`, `Aladin`, `Pocahontas`],
	}]
	
	createGui(){
		return Rows.padding(4).children(
			Text.text(`ShowyMovy!`).font(Font.size(sw(10)).bold()),
			...p.categories.map(
				c => p.createCategoryComponent(c)
			)
		)
	}
	
	createCategoryComponent(category){
		return [
			Box.height(5),
			Text.text(category.name).left().font(Font.size(sw(8))),
			Columns.children(
			...category.movieNames.map(
				n => p.createMovieComponent(n),
			)),
		]
	}
	
	createMovieComponent(name){
		return Box.padding(3).width(sw(35)).aspectRatio(1, 1).child(
			Text.backgroundColor(`silver`).border(1, `black`).text(name).font(Font.size(sw(6))).padding(2)
		)
	}
	
}