feat: add new button components and layout improvements

This commit is contained in:
Prad Nukala
2024-11-27 18:24:14 -05:00
parent 74d8d516b3
commit 09e4d4d452
28 changed files with 941 additions and 766 deletions
@@ -11,6 +11,18 @@ templ RegisterHeader() {
}
templ RegisterFooter() {
<p class="mt-6 text-sm text-center text-neutral-500">Already have an account? <a href="#_" class="relative font-medium text-blue-600 group"><span>Login here</span><span class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"></span></a></p>
<p class="px-8 mt-1 text-sm text-center text-neutral-500">By continuing, you agree to our <a class="underline underline-offset-4 hover:text-primary" href="/terms">Terms</a> and <a class="underline underline-offset-4 hover:text-primary" href="/privacy">Policy</a>.</p>
<p class="mt-6 text-sm text-center text-neutral-500">
Already have an account?
<a href="#_" class="relative font-medium text-blue-600 group">
<span>Login here</span>
<span class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"></span>
</a>
</p>
<p class="px-8 mt-1 text-sm text-center text-neutral-500">
By continuing, you agree to our
<a class="underline underline-offset-4 hover:text-primary" href="/terms">Terms</a> and
<a class="underline underline-offset-4 hover:text-primary" href="/privacy">
Policy
</a>.
</p>
}
@@ -58,7 +58,7 @@ func RegisterFooter() templ.Component {
templ_7745c5c3_Var2 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"mt-6 text-sm text-center text-neutral-500\">Already have an account? <a href=\"#_\" class=\"relative font-medium text-blue-600 group\"><span>Login here</span><span class=\"absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600\"></span></a></p><p class=\"px-8 mt-1 text-sm text-center text-neutral-500\">By continuing, you agree to our <a class=\"underline underline-offset-4 hover:text-primary\" href=\"/terms\">Terms</a> and <a class=\"underline underline-offset-4 hover:text-primary\" href=\"/privacy\">Policy</a>.</p>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p class=\"mt-6 text-sm text-center text-neutral-500\">Already have an account? <a href=\"#_\" class=\"relative font-medium text-blue-600 group\"><span>Login here</span> <span class=\"absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600\"></span></a></p><p class=\"px-8 mt-1 text-sm text-center text-neutral-500\">By continuing, you agree to our <a class=\"underline underline-offset-4 hover:text-primary\" href=\"/terms\">Terms</a> and <a class=\"underline underline-offset-4 hover:text-primary\" href=\"/privacy\">Policy</a>.</p>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+5 -4
View File
@@ -1,16 +1,17 @@
package login
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/pages/login/internal"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/auth/internal"
)
// RedirectModal returns the Modal with a QR code to scan.
templ Page() {
@ui.FullScreenModal() {
@view.FullScreenModal() {
<div class="relative text-center">
@internal.RegisterHeader()
@ui.Separator("Or Reserve Handle")
@layout.Separator("Or Reserve Handle")
@internal.ReserveHandleForm()
</div>
@internal.RegisterFooter()
+5 -4
View File
@@ -9,8 +9,9 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/pages/login/internal"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/auth/internal"
)
// RedirectModal returns the Modal with a QR code to scan.
@@ -55,7 +56,7 @@ func Page() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = layout.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -73,7 +74,7 @@ func Page() templ.Component {
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = ui.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = view.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+4 -3
View File
@@ -1,16 +1,17 @@
package dash
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/dash/internal"
)
// RedirectModal returns the Modal with a QR code to scan.
templ Page() {
@ui.FullScreenModal() {
@view.FullScreenModal() {
<div class="relative text-center">
@internal.RegisterHeader()
@ui.Separator("Or Reserve Handle")
@layout.Separator("Or Reserve Handle")
@internal.ReserveHandleForm()
</div>
@internal.RegisterFooter()
+4 -3
View File
@@ -9,7 +9,8 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/dash/internal"
)
@@ -55,7 +56,7 @@ func Page() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = layout.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -73,7 +74,7 @@ func Page() templ.Component {
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = ui.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = view.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+3 -3
View File
@@ -2,7 +2,7 @@ package internal
import (
"fmt"
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/button"
models "github.com/onsonr/sonr/pkg/webapp/models"
)
@@ -20,8 +20,8 @@ templ Hero(hero *models.Hero) {
{ hero.Subtitle }
</p>
<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
@ui.PrimaryButton("/register", "Get Started")
@ui.SecondaryButton("/learn", "Learn More")
@button.Primary("/register", "Get Started")
@button.Secondary("/learn", "Learn More")
</div>
</div>
</div>
+3 -3
View File
@@ -10,7 +10,7 @@ import templruntime "github.com/a-h/templ/runtime"
import (
"fmt"
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/button"
models "github.com/onsonr/sonr/pkg/webapp/models"
)
@@ -61,11 +61,11 @@ func Hero(hero *models.Hero) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.PrimaryButton("/register", "Get Started").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = button.Primary("/register", "Get Started").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.SecondaryButton("/learn", "Learn More").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = button.Secondary("/learn", "Learn More").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+2 -2
View File
@@ -2,13 +2,13 @@
package home
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
landing "github.com/onsonr/sonr/pkg/webapp/pages/home/internal"
)
// View renders the home page
templ Page() {
@ui.LayoutNoBody("Sonr.ID", true) {
@layout.NoBody("Sonr.ID", true) {
@landing.Header(header)
@landing.Hero(hero)
@landing.Highlights(highlights)
+2 -2
View File
@@ -10,7 +10,7 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
landing "github.com/onsonr/sonr/pkg/webapp/pages/home/internal"
)
@@ -110,7 +110,7 @@ func Page() templ.Component {
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = ui.LayoutNoBody("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = layout.NoBody("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+4 -3
View File
@@ -1,16 +1,17 @@
package login
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/login/internal"
)
// RedirectModal returns the Modal with a QR code to scan.
templ Page() {
@ui.FullScreenModal() {
@view.FullScreenModal() {
<div class="relative text-center">
@internal.RegisterHeader()
@ui.Separator("Or Reserve Handle")
@layout.Separator("Or Reserve Handle")
@internal.ReserveHandleForm()
</div>
@internal.RegisterFooter()
+4 -3
View File
@@ -9,7 +9,8 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/login/internal"
)
@@ -55,7 +56,7 @@ func Page() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = layout.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -73,7 +74,7 @@ func Page() templ.Component {
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = ui.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = view.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
+4 -3
View File
@@ -1,16 +1,17 @@
package register
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/register/internal"
)
// RedirectModal returns the Modal with a QR code to scan.
templ Page() {
@ui.FullScreenModal() {
@view.FullScreenModal() {
<div class="relative text-center">
@internal.RegisterHeader()
@ui.Separator("Or Reserve Handle")
@layout.Separator("Or Reserve Handle")
@internal.ReserveHandleForm()
</div>
@internal.RegisterFooter()
+4 -3
View File
@@ -9,7 +9,8 @@ import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import (
"github.com/onsonr/sonr/pkg/webapp/components/ui"
"github.com/onsonr/sonr/pkg/webapp/components/layout"
"github.com/onsonr/sonr/pkg/webapp/components/view"
"github.com/onsonr/sonr/pkg/webapp/pages/register/internal"
)
@@ -55,7 +56,7 @@ func Page() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ui.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = layout.Separator("Or Reserve Handle").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -73,7 +74,7 @@ func Page() templ.Component {
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = ui.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = view.FullScreenModal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}