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
64
}
65
65
66
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)])
67
+
let attributes = [class(header.offset), class("flex flex-col gap-4 w-full")]
68
+
html.main(attributes, [form(model), user_preview(model)])
69
69
}
70
70
71
71
pub fn update(model: Model, msg: Msg) -> #(Model, effect.Effect(Msg)) {
···
137
137
}
138
138
}
139
139
140
-
fn container(model: Model) -> element.Element(Msg) {
140
+
fn form(model: Model) -> element.Element(Msg) {
141
141
let attributes = [
142
142
class("grid grid-cols-1 gap-4 items-center"),
143
143
class("p-4 m-auto w-full max-w-md"),
144
144
class("rounded-md border border-surface"),
145
145
]
146
146
147
-
html.div(attributes, [fieldset(model), button(model), text_message(model)])
147
+
html.section(attributes, [
148
+
form_fieldset(model),
149
+
form_button(model),
150
+
form_text_message(model),
151
+
])
148
152
}
149
153
150
-
fn text_message(model: Model) -> element.Element(Msg) {
154
+
fn form_text_message(model: Model) -> element.Element(Msg) {
151
155
case model.text_message {
152
156
"" -> element.none()
153
157
text -> html.p([class("text-center text-white")], [html.text(text)])
154
158
}
155
159
}
156
160
157
-
fn button(model: Model) -> element.Element(Msg) {
161
+
fn form_button(model: Model) -> element.Element(Msg) {
158
162
let required_fields = [
159
163
model.user_name,
160
164
model.user_email,
···
175
179
let attributes = [
176
180
class("p-2 font-bold text-white rounded-md bg-secondary"),
177
181
class("flex gap-2 justify-center items-center"),
182
+
178
183
class("hover:cursor-pointer hover:bg-accent hover:text-primary"),
179
-
class("diabled:text-primary disabled:bg-surface"),
184
+
185
+
class("disabled:cursor-not-allowed"),
186
+
class("disabled:text-primary disabled:bg-surface"),
180
187
181
188
event.on_click(UserSentRequest),
182
189
attr.disabled(disabled),
···
185
192
html.button(attributes, [icon, html.text("Register")])
186
193
}
187
194
188
-
fn fieldset(model: Model) -> element.Element(Msg) {
195
+
fn form_fieldset(model: Model) -> element.Element(Msg) {
189
196
let attributes = [class("flex flex-col gap-2")]
190
197
191
198
html.fieldset(attributes, [
···
284
291
icon,
285
292
])
286
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
+
}