1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
// IMPORTS ---------------------------------------------------------------------
import gleam/int
import lustre
import lustre/attribute.{attribute}
import lustre/element.{type Element, text}
import lustre/element/html.{button, div, p, svg}
import lustre/element/svg.{path}
import lustre/event
// MAIN ------------------------------------------------------------------------
pub fn main() {
// A `simple` lustre application doesn't produce `Effect`s. These are best to
// start with if you're just getting started with lustre or you know you don't
// need the runtime to manage any side effects.
let app = lustre.simple(init, update, view)
let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil)
}
// MODEL -----------------------------------------------------------------------
pub type Model =
Int
pub fn init(_) -> Model {
0
}
// UPDATE ----------------------------------------------------------------------
pub opaque type Msg {
Incr
Decr
Reset
}
pub fn update(model: Model, msg: Msg) -> Model {
case msg {
Incr -> model + 1
Decr -> model - 1
Reset -> 0
}
}
// VIEW ------------------------------------------------------------------------
pub fn view(model: Model) -> Element(Msg) {
div(
[],
[
button(
[event.on_click(Incr)],
[plus([attribute.style([#("color", "red")])])],
),
button([event.on_click(Decr)], [minus([])]),
button([event.on_click(Reset)], [text("Reset")]),
p([], [text(int.to_string(model))]),
],
)
}
fn plus(attrs) {
svg(
[
attribute("width", "15"),
attribute("height", "15"),
attribute("viewBox", "0 0 15 15"),
attribute("fill", "none"),
..attrs
],
[
path([
attribute(
"d",
"M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z",
),
attribute("fill", "currentColor"),
attribute("fill-rule", "evenodd"),
attribute("clip-rule", "evenodd"),
]),
],
)
}
fn minus(attrs) {
svg(
[
attribute("width", "15"),
attribute("height", "15"),
attribute("viewBox", "0 0 15 15"),
attribute("fill", "none"),
..attrs
],
[
path([
attribute(
"d",
"M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z",
),
attribute("fill", "currentColor"),
attribute("fill-rule", "evenodd"),
attribute("clip-rule", "evenodd"),
]),
],
)
}
|
