refactor: Refactor registration forms to use UI components

internal/gateway/handlers/register/forms.templ

@@ -1,6 +1,9 @@
 package register
 
-import "github.com/onsonr/sonr/pkg/common/styles/layout"
+import (
+	"github.com/onsonr/sonr/internal/gateway/handlers/register/ui"
+	"github.com/onsonr/sonr/pkg/common/styles/layout"
+)
 
 templ formCreateProfile(action string, method string, data CreateProfileData) {
 	<form action={ templ.SafeURL(action) } method={ method }>
@@ -66,49 +69,11 @@ 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">
-					@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
+					@ui.ProfileCard(data.Address, data.Name, data.Handle, data.CreationBlock)
 				</div>
 			</div>
-			<sl-select
-				label="Accounts"
-				value="SNR BTC ETH"
-				help-text="Select Blockchains to connect with your Vault"
-				multiple
-				class="custom-tag py-2"
-			>
-				@cryptoWalletOption("SNR", "Sonr", true)
-				@cryptoWalletOption("BTC", "Bitcoin", true)
-				@cryptoWalletOption("ETH", "Ethereum", true)
-				@cryptoWalletOption("SOL", "Solana", false)
-				@cryptoWalletOption("LTC", "Litecoin", false)
-				@cryptoWalletOption("DOGE", "Dogecoin", false)
-				@cryptoWalletOption("XRP", "Ripple", false)
-				@cryptoWalletOption("OSMO", "Osmosis", false)
-				@cryptoWalletOption("ATOM", "Cosmos", false)
-				@cryptoWalletOption("STARZ", "Stargaze", false)
-				@cryptoWalletOption("AKT", "Akash", false)
-				@cryptoWalletOption("EVMOS", "Evmos", false)
-				@cryptoWalletOption("FIL", "Filecoin", false)
-				@cryptoWalletOption("AXL", "Axelar", false)
-			</sl-select>
-			<script type="module">
-          const select = document.querySelector('.custom-tag');
-
-          select.getTag = (option, index) => {
-            // Use the same icon used in the <sl-option>
-            const name = option.querySelector('sl-icon[slot="prefix"]').name;
-
-            // You can return a string, a Lit Template, or an HTMLElement here
-            return `
-              <sl-tag removable>
-                <sl-icon name="${name}" library="crypto" style="padding-inline-end: .5rem;"></sl-icon>
-                ${option.getTextLabel()}
-              </sl-tag>
-            `;
-          };
-        </script>
 			<div slot="footer" class="space-y-2">
-				@passkeyDropzone(data.Address, data.Handle, data.Challenge)
+				@ui.CreatePasskey(data.Address, data.Handle, data.Challenge)
 				<sl-button href="/" style="width: 100%;" outline>
 					<sl-icon slot="prefix" name="x-lg"></sl-icon>
 					Cancel