Lustre: Best practices while composing components | The Gleam Programming Language | Page 1

In React I'm used to render components inside of other components. Today I'm trying out Lustre and found myself wanting to share some reusable styling inside of a component.

Was just wondering if this is the way it's to be done in Lustre or if there's a "best practice" way of doing it? 🙂

fn tab(children: List(Element(a))) {
  html.div([attribute.class("bg-slate-900 -mt-1 border-4 border-white max-w-xl mx-auto p-6")], children)
}

fn pace_tab() {
  tab([
    html.text("You're on the pace tab")
  ])
}

fn distance_tab() {
  tab([
    html.text("You're on the distance tab")
  ])
}

#Lustre: Best practices while composing components