Skip to content

Commit 5a81384

Browse files
stefanbitcrstefanbitcr
committed
Rearrange home layout
1 parent 89489d0 commit 5a81384

File tree

1 file changed

+115
-109
lines changed

1 file changed

+115
-109
lines changed

‎src/pages/home/HomePage.tsx‎

Lines changed: 115 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function Loader() {
1313
}
1414

1515
function PageBody() {
16-
const { data } = useSuspenseQuery({
16+
const { data: identityData } = useSuspenseQuery({
1717
queryKey: ["identity-detail"],
1818
queryFn: async () => {
1919
const response = await identityDetail()
@@ -33,131 +33,137 @@ function PageBody() {
3333
gcTime: Infinity,
3434
})
3535

36-
if (!data) {
37-
return (
38-
<div className="bg-card text-card-foreground rounded-lg border p-6">
39-
<div className="text-center text-muted-foreground">No identity found</div>
40-
</div>
41-
)
42-
}
43-
4436
return (
4537
<div className="flex flex-col gap-4">
46-
{mintData && (
38+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
4739
<div className="bg-card text-card-foreground rounded-lg border p-6">
48-
<h3 className="text-lg font-semibold mb-4">Mint Information</h3>
49-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
50-
{mintData.name && (
40+
<h3 className="text-lg font-semibold mb-4">Identity</h3>
41+
{identityData ? (
42+
<div className="flex flex-col gap-4">
5143
<div className="flex flex-col gap-1">
5244
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
53-
<span className="font-semibold text-base">{mintData.name}</span>
54-
</div>
55-
)}
56-
{mintData.version && (
57-
<div className="flex flex-col gap-1">
58-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Version</span>
59-
<span className="text-sm">{mintData.version}</span>
45+
<span className="font-semibold text-base">{identityData.name}</span>
6046
</div>
61-
)}
62-
{mintData.description && (
63-
<div className="flex flex-col gap-1 md:col-span-2">
64-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Description</span>
65-
<span className="text-sm">{mintData.description}</span>
66-
</div>
67-
)}
68-
{mintData.description_long && (
69-
<div className="flex flex-col gap-1 md:col-span-2">
70-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
71-
Long Description
72-
</span>
73-
<span className="text-sm whitespace-pre-line">{mintData.description_long}</span>
74-
</div>
75-
)}
76-
{mintData.pubkey && (
77-
<div className="flex flex-col gap-1 md:col-span-2">
78-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Public Key</span>
79-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
80-
{mintData.pubkey}
81-
</span>
82-
</div>
83-
)}
84-
{mintData.contact && mintData.contact.length > 0 && (
85-
<div className="flex flex-col gap-1 md:col-span-2">
86-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Contact</span>
87-
<div className="flex flex-wrap gap-2">
88-
{mintData.contact.map((contact) => (
89-
<span key={contact} className="text-sm bg-muted px-2 py-1 rounded">
90-
{contact}
47+
{identityData.email && (
48+
<div className="flex flex-col gap-1">
49+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Email</span>
50+
<span className="font-mono text-sm text-muted-foreground">{identityData.email}</span>
51+
</div>
52+
)}
53+
{identityData.date_of_birth && (
54+
<div className="flex flex-col gap-1">
55+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
56+
Date of Birth
57+
</span>
58+
<span className="text-sm">{identityData.date_of_birth}</span>
59+
</div>
60+
)}
61+
62+
<div className="border-t pt-4 mt-4">
63+
<h4 className="text-md font-semibold mb-4">Keys</h4>
64+
<div className="flex flex-col gap-4">
65+
<div className="flex flex-col gap-1">
66+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Node ID</span>
67+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
68+
{identityData.node_id}
69+
</span>
70+
</div>
71+
<div className="flex flex-col gap-1">
72+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
73+
Bitcoin Public Key
74+
</span>
75+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
76+
{identityData.bitcoin_public_key}
9177
</span>
92-
))}
78+
</div>
79+
<div className="flex flex-col gap-1">
80+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
81+
Nostr Public Key
82+
</span>
83+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
84+
{identityData.npub}
85+
</span>
86+
</div>
9387
</div>
9488
</div>
95-
)}
96-
</div>
97-
</div>
98-
)}
9989

100-
<div className="bg-card text-card-foreground rounded-lg border p-6">
101-
<h3 className="text-lg font-semibold mb-4">Identity</h3>
102-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
103-
<div className="flex flex-col gap-1">
104-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
105-
<span className="font-semibold text-base">{data.name}</span>
106-
</div>
107-
{data.email && (
108-
<div className="flex flex-col gap-1">
109-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Email</span>
110-
<span className="font-mono text-sm text-muted-foreground">{data.email}</span>
111-
</div>
112-
)}
113-
{data.date_of_birth && (
114-
<div className="flex flex-col gap-1">
115-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Date of Birth</span>
116-
<span className="text-sm">{data.date_of_birth}</span>
90+
{identityData.postal_address && (
91+
<div className="border-t pt-4 mt-4">
92+
<h4 className="text-md font-semibold mb-4">Address</h4>
93+
<div className="flex flex-col gap-1">
94+
<div className="text-sm leading-relaxed">
95+
<div className="font-medium">{identityData.postal_address.address}</div>
96+
<div className="text-muted-foreground">
97+
{identityData.postal_address.city}
98+
{identityData.postal_address.zip && `, ${identityData.postal_address.zip}`}
99+
</div>
100+
<div className="text-muted-foreground">{identityData.postal_address.country}</div>
101+
</div>
102+
</div>
103+
</div>
104+
)}
117105
</div>
106+
) : (
107+
<div className="text-center text-muted-foreground">No identity found</div>
118108
)}
119109
</div>
120-
</div>
121-
122-
<div className="bg-card text-card-foreground rounded-lg border p-6">
123-
<h3 className="text-lg font-semibold mb-4">Keys</h3>
124-
<div className="flex flex-col gap-4">
125-
<div className="flex flex-col gap-1">
126-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Node ID</span>
127-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
128-
{data.node_id}
129-
</span>
130-
</div>
131-
<div className="flex flex-col gap-1">
132-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
133-
Bitcoin Public Key
134-
</span>
135-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
136-
{data.bitcoin_public_key}
137-
</span>
138-
</div>
139-
<div className="flex flex-col gap-1">
140-
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Nostr Public Key</span>
141-
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">{data.npub}</span>
142-
</div>
143-
</div>
144-
</div>
145110

146-
{data.postal_address && (
147111
<div className="bg-card text-card-foreground rounded-lg border p-6">
148-
<h3 className="text-lg font-semibold mb-4">Address</h3>
149-
<div className="flex flex-col gap-1">
150-
<div className="text-sm leading-relaxed">
151-
<div className="font-medium">{data.postal_address.address}</div>
152-
<div className="text-muted-foreground">
153-
{data.postal_address.city}
154-
{data.postal_address.zip && `, ${data.postal_address.zip}`}
155-
</div>
156-
<div className="text-muted-foreground">{data.postal_address.country}</div>
112+
<h3 className="text-lg font-semibold mb-4">Mint Information</h3>
113+
{mintData ? (
114+
<div className="flex flex-col gap-4">
115+
{mintData.name && (
116+
<div className="flex flex-col gap-1">
117+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
118+
<span className="font-semibold text-base">{mintData.name}</span>
119+
</div>
120+
)}
121+
{mintData.version && (
122+
<div className="flex flex-col gap-1">
123+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Version</span>
124+
<span className="text-sm">{mintData.version}</span>
125+
</div>
126+
)}
127+
{mintData.description && (
128+
<div className="flex flex-col gap-1">
129+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Description</span>
130+
<span className="text-sm">{mintData.description}</span>
131+
</div>
132+
)}
133+
{mintData.description_long && (
134+
<div className="flex flex-col gap-1">
135+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
136+
Long Description
137+
</span>
138+
<span className="text-sm whitespace-pre-line">{mintData.description_long}</span>
139+
</div>
140+
)}
141+
{mintData.pubkey && (
142+
<div className="flex flex-col gap-1">
143+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Public Key</span>
144+
<span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
145+
{mintData.pubkey}
146+
</span>
147+
</div>
148+
)}
149+
{mintData.contact && mintData.contact.length > 0 && (
150+
<div className="flex flex-col gap-1">
151+
<span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Contact</span>
152+
<div className="flex flex-wrap gap-2">
153+
{mintData.contact.map((contact) => (
154+
<span key={contact} className="text-sm bg-muted px-2 py-1 rounded">
155+
{contact}
156+
</span>
157+
))}
158+
</div>
159+
</div>
160+
)}
157161
</div>
158-
</div>
162+
) : (
163+
<div className="text-center text-muted-foreground">No mint information available</div>
164+
)}
159165
</div>
160-
)}
166+
</div>
161167
</div>
162168
)
163169
}

0 commit comments

Comments
 (0)