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

refactor: improve profile card styling and functionality

Browse Source
This commit is contained in:
Prad Nukala
2024-12-09 14:42:07 -05:00
parent 553cff37a1
commit 2286708d56
16 changed files with 508 additions and 1194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/blocks/cards/profile.templ
+23 -8
View File
@@ -1,20 +1,27 @@
package cards
templ SonrProfile(address string, handle string, name string, chainID string, creationBlock string) {
<div class="profile-card">
<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-900 to-cyan-500 p-4 py-5 px-5 rounded-xl">
type SonrProfileData struct {
Address string
Handle string
Name string
ChainID string
CreationBlock string
}
templ SonrProfile(addr string, name string, handle string, creationBlock string) {
<div class="profile-card min-w-[320px]">
<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-purple-800 to-purple-400 p-4 py-5 px-5 rounded-xl">
<div class="flex justify-between">
<div>
<h2>{ chainID }</h2>
<h3>sonr-testnet-1</h3>
<p class="text-2xl font-bold">{ handle }</p>
</div>
<div class="flex items-center ">
<div class="p-5 bg-gray-200 bg-opacity-40 rounded-full"></div>
<div class="p-5 bg-gray-200 bg-opacity-30 rounded-full -ml-4"></div>
<div class="flex items-center opacity-60">
<sl-icon style="font-size: 52px;" library="sonr" name="sonr-fill"></sl-icon>
</div>
</div>
<div class="mt-5 flex justify-between items-center w-52">
<span class="text-lg">{ address }</span>
<span class="text-lg font-mono">{ shortenAddress(addr) }</span>
</div>
<div class="flex justify-between mt-5 w-48 ">
<div>
@@ -29,3 +36,11 @@ templ SonrProfile(address string, handle string, name string, chainID string, cr
</div>
</div>
}
// Helper function to shorten address
func shortenAddress(address string) string {
if len(address) <= 20 {
return address
}
return address[:16] + "..." + address[len(address)-4:]
}
pkg/blocks/cards/profile_templ.go
+31 -28
View File
@@ -8,7 +8,15 @@ package cards
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
func SonrProfile(address string, handle string, name string, chainID string, creationBlock string) templ.Component {
type SonrProfileData struct {
Address string
Handle string
Name string
ChainID string
CreationBlock string
}
func SonrProfile(addr string, name string, handle string, creationBlock string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,55 +37,42 @@ func SonrProfile(address string, handle string, name string, chainID string, cre
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"profile-card\"><div class=\"text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-900 to-cyan-500 p-4 py-5 px-5 rounded-xl\"><div class=\"flex justify-between\"><div><h2>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"profile-card min-w-[320px]\"><div class=\"text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-purple-800 to-purple-400 p-4 py-5 px-5 rounded-xl\"><div class=\"flex justify-between\"><div><h3>sonr-testnet-1</h3><p class=\"text-2xl font-bold\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(chainID)
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(handle)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 8, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 17, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2><p class=\"text-2xl font-bold\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"flex items-center opacity-60\"><sl-icon style=\"font-size: 52px;\" library=\"sonr\" name=\"sonr-fill\"></sl-icon></div></div><div class=\"mt-5 flex justify-between items-center w-52\"><span class=\"text-lg font-mono\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(handle)
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(shortenAddress(addr))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 9, Col: 43}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 24, Col: 58}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"flex items-center \"><div class=\"p-5 bg-gray-200 bg-opacity-40 rounded-full\"></div><div class=\"p-5 bg-gray-200 bg-opacity-30 rounded-full -ml-4\"></div></div></div><div class=\"mt-5 flex justify-between items-center w-52\"><span class=\"text-lg\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(address)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 17, Col: 35}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"flex justify-between mt-5 w-48 \"><div><h3 class=\"text-xs\">Block Created </h3><p class=\"font-bold\"><span>#</span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(creationBlock)
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(creationBlock)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 22, Col: 55}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 29, Col: 55}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -85,12 +80,12 @@ func SonrProfile(address string, handle string, name string, chainID string, cre
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(name)
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 26, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/cards/profile.templ`, Line: 33, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -102,4 +97,12 @@ func SonrProfile(address string, handle string, name string, chainID string, cre
})
}
// Helper function to shorten address
func shortenAddress(address string) string {
if len(address) <= 20 {
return address
}
return address[:16] + "..." + address[len(address)-4:]
}
var _ = templruntime.GeneratedTemplate