Display identity detail information

Author: stefanbitcr

src/pages/home/HomePage.tsx

@@ -19,7 +19,7 @@ function PageBody() {
       const response = await identityDetail()
       return response.data
     },
-    staleTime: Infinity, // Data won't change
+    staleTime: Infinity,
     gcTime: Infinity,
   })
 
@@ -28,51 +28,63 @@ function PageBody() {
   }
 
   return (
-    <>
-      <div className="flex flex-col gap-2 bg-accent text-accent-foreground rounded-lg p-4 my-2">
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Name</span>
-          <span className="font-bold">{data.name}</span>
-        </div>
-
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Email</span>
-          <span className="font-mono text-sm">{data.email}</span>
-        </div>
-
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Node ID</span>
-          <span className="font-mono text-sm break-all">{data.node_id}</span>
-        </div>
-
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Bitcoin Public Key</span>
-          <span className="font-mono text-sm break-all">{data.bitcoin_public_key}</span>
-        </div>
-
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Nostr Public Key</span>
-          <span className="font-mono text-sm break-all">{data.npub}</span>
+    <div className="flex flex-col gap-4">
+      <div className="bg-card text-card-foreground rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Information</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Name</span>
+            <span className="font-semibold text-base">{data.name}</span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Email</span>
+            <span className="font-mono text-sm text-muted-foreground">{data.email}</span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Date of Birth</span>
+            <span className="text-sm">{data.date_of_birth}</span>
+          </div>
         </div>
+      </div>
 
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Date of Birth</span>
-          <span className="text-sm">{data.date_of_birth}</span>
+      <div className="bg-card text-card-foreground rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Keys</h3>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Node ID</span>
+            <span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
+              {data.node_id}
+            </span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+              Bitcoin Public Key
+            </span>
+            <span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">
+              {data.bitcoin_public_key}
+            </span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Nostr Public Key</span>
+            <span className="font-mono text-sm break-all bg-muted p-2 rounded text-muted-foreground">{data.npub}</span>
+          </div>
         </div>
+      </div>
 
-        <div className="flex flex-col gap-0.5">
-          <span className="text-xs text-accent-foreground/50 uppercase tracking-wide">Address</span>
-          <div className="text-sm">
-            <div>{data.postal_address.address}</div>
-            <div>
+      <div className="bg-card text-card-foreground rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Address</h3>
+        <div className="flex flex-col gap-1">
+          <div className="text-sm leading-relaxed">
+            <div className="font-medium">{data.postal_address.address}</div>
+            <div className="text-muted-foreground">
               {data.postal_address.city}
               {data.postal_address.zip && `, ${data.postal_address.zip}`}
             </div>
-            <div>{data.postal_address.country}</div>
+            <div className="text-muted-foreground">{data.postal_address.country}</div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }