2024-12-22 17:01:11 -05:00
|
|
|
package views
|
2024-12-11 14:55:19 -05:00
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ Form(action, id string) {
|
|
|
|
<form method="GET" action={ templ.SafeURL(action) } id={ id } hx-post={ action } hx-target="#{ id }" hx-swap="outerHTML">
|
2024-12-11 14:55:19 -05:00
|
|
|
{ children... }
|
|
|
|
</form>
|
|
|
|
}
|
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ FormHeader() {
|
2024-12-11 14:55:19 -05:00
|
|
|
<div slot="header">
|
|
|
|
<div class="w-full py-2">
|
|
|
|
{ children... }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ FormBody() {
|
2024-12-11 15:11:24 -05:00
|
|
|
<sl-card class="card-form max-w-lg mx-auto">
|
2024-12-11 14:55:19 -05:00
|
|
|
{ children... }
|
|
|
|
<style>
|
|
|
|
.card-form {
|
|
|
|
space-y: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-form [slot='header'] {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-form [slot='footer'] {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</sl-card>
|
|
|
|
}
|
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ FormFooter() {
|
2024-12-11 14:55:19 -05:00
|
|
|
<div slot="footer">
|
|
|
|
{ children... }
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ FormCancel() {
|
2024-12-11 14:55:19 -05:00
|
|
|
<sl-button href="/" outline>
|
|
|
|
<sl-icon slot="prefix" name="x-lg"></sl-icon>
|
|
|
|
Cancel
|
|
|
|
</sl-button>
|
|
|
|
}
|
|
|
|
|
2024-12-22 17:01:11 -05:00
|
|
|
templ FormSubmit(text string) {
|
2024-12-11 14:55:19 -05:00
|
|
|
<sl-button type="submit">
|
|
|
|
{ text }
|
|
|
|
<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
|
|
|
|
</sl-button>
|
|
|
|
}
|