1 files changed, 51 insertions, 47 deletions

diff --git a/examples/07-routing/src/app.gleam b/examples/07-routing/src/app.gleam
index 382bd60..e82f895 100644
--- a/examples/07-routing/src/app.gleam
+++ b/examples/07-routing/src/app.gleam
@@ -19,6 +19,8 @@ import modem
 // In your own apps, make sure to add the `lustre/ui` dependency and include the
 // stylesheet somewhere.
 import lustre/ui
+import lustre/ui/layout/cluster
+import lustre/ui/util/cn
 
 // MAIN ------------------------------------------------------------------------
 
@@ -30,7 +32,7 @@ pub fn main() {
 // MODEL -----------------------------------------------------------------------
 
 type Model {
-  Model(current: Route, guests: List(Guest), new_guest_name: String)
+  Model(current_route: Route, guests: List(Guest), new_guest_name: String)
 }
 
 type Route {
@@ -45,7 +47,7 @@ type Guest {
 fn init(_) -> #(Model, Effect(Msg)) {
   #(
     Model(
-      current: Home,
+      current_route: Home,
       guests: [
         Guest(slug: "chihiro", name: "Chihiro"),
         Guest(slug: "totoro", name: "Totoro"),
@@ -73,7 +75,10 @@ pub opaque type Msg {
 
 fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
   case msg {
-    OnRouteChange(route) -> #(Model(..model, current: route), effect.none())
+    OnRouteChange(route) -> #(
+      Model(..model, current_route: route),
+      effect.none(),
+    )
     UserUpdatedNewGuestName(name) -> #(
       Model(..model, new_guest_name: name),
       effect.none(),
@@ -94,36 +99,18 @@ fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
 fn view(model: Model) -> Element(Msg) {
   let styles = [#("margin", "15vh")]
 
-  let page = case model.current {
-    WelcomeGuest(name) -> render_welcome(model, name)
-    Home -> render_home(model)
-  }
-
-  ui.stack([attribute.style(styles)], [render_nav(model), page])
-}
-
-fn render_nav(model: Model) -> Element(a) {
-  let item_styles = [#("margin", "15px"), #("text-decoration", "underline")]
-
-  let nav_item = fn(path, text) {
-    html.a([attribute.href("/" <> path), attribute.style(item_styles)], [
-      element.text(text),
-    ])
+  let page = case model.current_route {
+    Home -> view_home(model)
+    WelcomeGuest(name) -> view_welcome(model, name)
   }
 
-  let guests =
-    model.guests
-    |> list.map(fn(guest: Guest) {
-      nav_item("welcome/" <> guest.slug, guest.name)
-    })
-
-  html.nav([], [nav_item("", "Home"), ..guests])
+  ui.stack([attribute.style(styles)], [view_nav(model), page])
 }
 
-fn render_home(model: Model) {
+fn view_home(model: Model) {
   let new_guest_input = fn(event) {
-    use code <- result.try(dynamic.field("key", dynamic.string)(event))
-    case code {
+    use key_code <- result.try(dynamic.field("key", dynamic.string)(event))
+    case key_code {
       "Enter" -> {
         let guest_slug =
           model.new_guest_name
@@ -139,35 +126,52 @@ fn render_home(model: Model) {
       }
     }
   }
-  ui.centre(
-    [attribute.style([#("margin-top", "10vh")])],
-    ui.stack([], [
-      to_title("Welcome to the Party 🏡"),
-      html.label([], [element.text("Please sign the guest book:")]),
-      ui.input([
-        event.on("keyup", new_guest_input),
-        attribute.value(model.new_guest_name),
-      ]),
+
+  view_body([
+    view_title("Welcome to the Party 🏡"),
+    html.p([], [element.text("Please sign the guest book:")]),
+    ui.input([
+      event.on("keyup", new_guest_input),
+      attribute.value(model.new_guest_name),
     ]),
-  )
+  ])
 }
 
-fn render_welcome(model: Model, slug) -> Element(a) {
+fn view_welcome(model: Model, slug) -> Element(a) {
   let guest =
     model.guests
     |> list.find(fn(guest: Guest) { guest.slug == slug })
 
   let title = case guest {
-    Ok(guest) -> to_title("Hello, " <> guest.name <> "! 🎉")
-    _ -> to_title("Sorry ... didn't quite catch that.")
+    Ok(guest) -> view_title("Hello, " <> guest.name <> "! 🎉")
+    _ -> view_title("Sorry ... didn't quite catch that.")
   }
 
-  ui.centre([attribute.style([#("margin-top", "10vh")])], title)
+  view_body([title])
 }
 
-fn to_title(text) {
-  html.h1(
-    [attribute.style([#("font-size", "36px"), #("font-weight", "bold")])],
-    [element.text(text)],
-  )
+fn view_nav(model: Model) -> Element(a) {
+  let item_styles = [#("text-decoration", "underline")]
+
+  let view_nav_item = fn(path, text) {
+    html.a([attribute.href("/" <> path), attribute.style(item_styles)], [
+      element.text(text),
+    ])
+  }
+
+  let guest_nav_items =
+    model.guests
+    |> list.map(fn(guest: Guest) {
+      view_nav_item("welcome/" <> guest.slug, guest.name)
+    })
+
+  cluster.of(html.nav, [], [view_nav_item("", "Home"), ..guest_nav_items])
+}
+
+fn view_body(children) {
+  ui.centre([cn.mt_xl()], ui.stack([], children))
+}
+
+fn view_title(text) {
+  html.h1([cn.text_xl()], [element.text(text)])
 }