go/sonr
1
0
Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-08-04 18:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Refactor registration forms to use UI components

Browse Source
This commit is contained in:
Prad Nukala
2024-12-10 23:41:49 -05:00
parent aa43770bf4
commit e2f24eef8e
31 changed files with 1380 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/gateway/handlers/register/ui/form_card.templ
+46
View File
@@ -0,0 +1,46 @@
package ui
templ FormCard(action string, method string) {
<form action={ templ.SafeURL(action) } method={ method }>
<sl-card class="card-form gap-4 max-w-xl">
<div slot="header">
<div class="w-full py-2"></div>
</div>
<div slot="footer" class="space-y-2">
<sl-button href="/" outline>
<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
Cancel
</sl-button>
<sl-button type="submit">
Next
<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
<sl-spinner slot="suffix" style="display: none;" class="text-neutral-500"></sl-spinner>
</sl-button>
</div>
<style>
.card-form {
margin: 1rem;
}
.card-form [slot='footer'] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 640px) {
.card-form {
margin: 0.5rem;
}
.card-form [slot='footer'] {
flex-direction: column-reverse;
width: 100%;
}
.card-form [slot='footer'] sl-button {
width: 100%;
}
}
</style>
</sl-card>
</form>
}