refactor: reorganize pkl files for better separation of concerns

pkg/nebula/components/home/hero.templ

@@ -1,6 +1,9 @@
 package home
 
-import "github.com/onsonr/sonr/pkg/nebula/models"
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/ui"
+	"github.com/onsonr/sonr/pkg/nebula/models"
+)
 
 templ SectionHero(hero *models.Hero) {
 	<!-- Hero -->
@@ -24,12 +27,8 @@ templ SectionHero(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">
-							<div>
-								<div class="btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ hero.PrimaryButton.Href }>{ hero.PrimaryButton.Text }</div>
-							</div>
-							<div>
-								<div class="btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" hx-swap="afterend" hx-get={ hero.SecondaryButton.Href }>{ hero.SecondaryButton.Text }</div>
-							</div>
+							@ui.PrimaryButton(hero.PrimaryButton.Href, hero.PrimaryButton.Text)
+							@ui.SecondaryButton(hero.SecondaryButton.Href, hero.SecondaryButton.Text)
 						</div>
 					</div>
 				</div>

pkg/nebula/components/register/view.templ

@@ -1,22 +1,10 @@
 package register
 
 import (
-	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
 )
 
-templ View(c echo.Context) {
-	@blocks.Layout("Sonr.ID", true) {
-		@blocks.Card("register-view", blocks.SizeMedium) {
-			@blocks.Spacer()
-			@blocks.Breadcrumbs()
-			@basicInfoForm(formstate.Initial)
-			@blocks.Spacer()
-		}
-	}
-}
-
 templ basicInfoForm(state formstate.FormState) {
 	switch (state) {
 		default:

pkg/nebula/components/ui/button.templ

@@ -0,0 +1,13 @@
+package ui
+
+templ PrimaryButton(href string, text string) {
+	<div>
+		<div class="btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
+	</div>
+}
+
+templ SecondaryButton(href string, text string) {
+	<div>
+		<div class="btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
+	</div>
+}