kacaii.dev
👩🚒 Firefighters API written in Gleam!
lustre
gleam
:lipstick: add small preview to user
+41
-8
client/src/client/page/signup.gleam
+41
-8
client/src/client/page/signup.gleam
···
64
}
65
66
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
67
-
let attributes = [class(header.offset), class("flex flex-col w-full")]
68
-
html.section(attributes, [container(model)])
69
}
70
71
pub fn update(model: Model, msg: Msg) -> #(Model, effect.Effect(Msg)) {
···
137
}
138
}
139
140
-
fn container(model: Model) -> element.Element(Msg) {
141
let attributes = [
142
class("grid grid-cols-1 gap-4 items-center"),
143
class("p-4 m-auto w-full max-w-md"),
144
class("rounded-md border border-surface"),
145
]
146
147
-
html.div(attributes, [fieldset(model), button(model), text_message(model)])
148
}
149
150
-
fn text_message(model: Model) -> element.Element(Msg) {
151
case model.text_message {
152
"" -> element.none()
153
text -> html.p([class("text-center text-white")], [html.text(text)])
154
}
155
}
156
157
-
fn button(model: Model) -> element.Element(Msg) {
158
let required_fields = [
159
model.user_name,
160
model.user_email,
···
175
let attributes = [
176
class("p-2 font-bold text-white rounded-md bg-secondary"),
177
class("flex gap-2 justify-center items-center"),
178
class("hover:cursor-pointer hover:bg-accent hover:text-primary"),
179
-
class("diabled:text-primary disabled:bg-surface"),
180
181
event.on_click(UserSentRequest),
182
attr.disabled(disabled),
···
185
html.button(attributes, [icon, html.text("Register")])
186
}
187
188
-
fn fieldset(model: Model) -> element.Element(Msg) {
189
let attributes = [class("flex flex-col gap-2")]
190
191
html.fieldset(attributes, [
···
284
icon,
285
])
286
}
···
64
}
65
66
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
67
+
let attributes = [class(header.offset), class("flex flex-col gap-4 w-full")]
68
+
html.main(attributes, [form(model), user_preview(model)])
69
}
70
71
pub fn update(model: Model, msg: Msg) -> #(Model, effect.Effect(Msg)) {
···
137
}
138
}
139
140
+
fn form(model: Model) -> element.Element(Msg) {
141
let attributes = [
142
class("grid grid-cols-1 gap-4 items-center"),
143
class("p-4 m-auto w-full max-w-md"),
144
class("rounded-md border border-surface"),
145
]
146
147
+
html.section(attributes, [
148
+
form_fieldset(model),
149
+
form_button(model),
150
+
form_text_message(model),
151
+
])
152
}
153
154
+
fn form_text_message(model: Model) -> element.Element(Msg) {
155
case model.text_message {
156
"" -> element.none()
157
text -> html.p([class("text-center text-white")], [html.text(text)])
158
}
159
}
160
161
+
fn form_button(model: Model) -> element.Element(Msg) {
162
let required_fields = [
163
model.user_name,
164
model.user_email,
···
179
let attributes = [
180
class("p-2 font-bold text-white rounded-md bg-secondary"),
181
class("flex gap-2 justify-center items-center"),
182
+
183
class("hover:cursor-pointer hover:bg-accent hover:text-primary"),
184
+
185
+
class("disabled:cursor-not-allowed"),
186
+
class("disabled:text-primary disabled:bg-surface"),
187
188
event.on_click(UserSentRequest),
189
attr.disabled(disabled),
···
192
html.button(attributes, [icon, html.text("Register")])
193
}
194
195
+
fn form_fieldset(model: Model) -> element.Element(Msg) {
196
let attributes = [class("flex flex-col gap-2")]
197
198
html.fieldset(attributes, [
···
291
icon,
292
])
293
}
294
+
295
+
fn user_preview(model: Model) -> element.Element(Msg) {
296
+
let placeholder_style = class("animate-pulse bg-surface")
297
+
298
+
let attributes = [
299
+
class("flex flex-col"),
300
+
class("p-4 m-auto w-full max-w-md"),
301
+
class("rounded-md border border-surface"),
302
+
]
303
+
304
+
html.section(attributes, [
305
+
html.div([class("flex gap-4 text-white")], [
306
+
html.div([placeholder_style, class("rounded-full size-16")], []),
307
+
html.div([class("grid grid-rows-2 gap-2 items-center")], [
308
+
case model.user_name {
309
+
"" -> html.div([placeholder_style, class("w-40 h-4 rounded-md")], [])
310
+
value -> html.h3([class("truncate")], [html.text(value)])
311
+
},
312
+
case model.user_email {
313
+
"" -> html.div([placeholder_style, class("h-4 rounded-md w-50")], [])
314
+
value -> html.p([class("truncate")], [html.text(value)])
315
+
},
316
+
]),
317
+
]),
318
+
])
319
+
}