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

refactor: update index views to use new nebula components

Browse Source
This commit is contained in:
Prad Nukala
2024-12-11 14:55:19 -05:00
parent 83b8fc597a
commit 0a2b91c9ac
37 changed files with 813 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/gateway/handlers/register/forms.templ
+19 -60
View File
@@ -1,66 +1,25 @@
package register
import (
"github.com/onsonr/sonr/internal/gateway/handlers/register/ui"
"github.com/onsonr/sonr/pkg/common/styles/layout"
"github.com/onsonr/sonr/internal/nebula/card"
"github.com/onsonr/sonr/internal/nebula/form"
)
templ formCreateProfile(action string, method string, data CreateProfileData) {
<form action={ templ.SafeURL(action) } method={ method }>
<sl-card class="card-form gap-6 w-full max-w-xl">
<div slot="header">
<div class="w-full py-1">
<sl-progress-bar value="50"></sl-progress-bar>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<sl-input name="first_name" placeholder="Satoshi" type="text" label="First Name" required autofocus></sl-input>
<sl-input name="last_name" placeholder="N" maxlength="1" type="text" label="Last Initial"></sl-input>
</div>
@layout.Spacer()
<sl-input name="handle" placeholder="digitalgold" type="text" label="Handle" minlength="4" maxlength="12" required>
<div slot="prefix">
<sl-icon name="at-sign" library="sonr"></sl-icon>
</div>
</sl-input>
@layout.Spacer()
<sl-range name="is_human" label={ data.IsHumanLabel() } help-text="Prove you are a human." min="0" max="9" step="1"></sl-range>
<div slot="footer">
<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-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>
@form.Root(action, method, "create-profile") {
@form.Body() {
@form.Header() {
<sl-progress-bar value="50"></sl-progress-bar>
}
@form.InputName()
@form.InputHandle()
@form.InputHumanSlider(data.FirstNumber, data.LastNumber)
@form.Footer() {
@form.CancelButton()
@form.SubmitButton("Next")
}
}
}
}
templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
@@ -69,12 +28,12 @@ templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
<sl-card class="card-form gap-4 max-w-xl">
<div slot="header">
<div class="w-full py-2">
@ui.ProfileCard(data.Address, data.Name, data.Handle, data.CreationBlock)
@card.SonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
</div>
</div>
@ui.SelectCoins()
@form.InputCoinSelect()
<div slot="footer" class="space-y-2">
@ui.InputPasskey(data.Address, data.Handle, data.Challenge)
@form.InputPasskey(data.Address, data.Handle, data.Challenge)
<sl-button href="/" style="width: 100%;" outline>
<sl-icon slot="prefix" name="x-lg"></sl-icon>
Cancel