refactor Avatar in AgentPage

planetarium · May 31, 2024 · 5c69f97 · 5c69f97
1 parent 9c0ace1
commit 5c69f97
Showing 1 changed file with 26 additions and 13 deletions.
diff --git 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>
     )
 }