From 5c69f97f4ad7d430ab909c808f4e64616fe91365 Mon Sep 17 00:00:00 2001
From: Hyun Seungmin <boscohyun@gmail.com>
Date: Fri, 31 May 2024 17:07:26 +0900
Subject: [PATCH] refactor Avatar in AgentPage

---
 pages/[network]/agent/[address].tsx | 39 +++++++++++++++++++----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/pages/[network]/agent/[address].tsx b/pages/[network]/agent/[address].tsx
index 66444b5..a280c68 100644
--- a/pages/[network]/agent/[address].tsx
+++ b/pages/[network]/agent/[address].tsx
@@ -17,6 +17,31 @@ interface AgentPageProps {
     agent: Agent | null
 }
 
+function Avatar(avatar: Avatar) {
+    const style = {
+        margin: "2rem",
+        padding: "1rem",
+        borderColor: "black",
+        border: "solid 1px",
+    };
+
+    if (avatar.name === null || avatar.name === undefined) {
+        return (
+            <p key={avatar.address} style={style}>
+                <a href={`../avatar/${avatar.address}`}>No found ({avatar.address})</a>
+            </p>
+        );
+    }
+
+    return (
+        <p key={avatar.address} style={style}>
+            <a href={`../avatar/${avatar.address}`}>
+                Lv.{avatar.level} {avatar.name} ({avatar.actionPoint}/120) ({avatar.address})
+            </a>
+        </p>
+    );
+}
+
 const AgentPage: NextPage<AgentPageProps> = ({ agent }) => {
     if (agent === null) {
         return (
@@ -31,21 +56,9 @@ const AgentPage: NextPage<AgentPageProps> = ({ agent }) => {
         border: "solid 1px"
     };
 
-    function handleAvatar(avatar: Avatar) {
-        if (avatar.name === null || avatar.name === undefined) {
-            return (
-                <p key={avatar.address} style={style}><a href={`../avatar/${avatar.address}`}>No found ({avatar.address})</a></p>
-            )
-        }
-
-        return (
-            <p key={avatar.address} style={style}><a href={`../avatar/${avatar.address}`}>Lv.{avatar.level} {avatar.name} ({avatar.actionPoint}/120) ({avatar.address})</a></p>
-        )
-    }
-
     return (
         <div>
-            {agent.avatars.map(handleAvatar)}
+            {agent.avatars.map(avatar => <Avatar key={avatar.address} {...avatar} />)}
         </div>
     )
 }