add player status in layout

src/ui/Duel/layout.tsx

@@ -7,10 +7,9 @@ const { Header, Footer, Sider, Content } = Layout;
 
 const headerStyle: React.CSSProperties = {
   textAlign: "center",
+  alignContent: "center",
   color: "#fff",
   height: layoutConfig.header.height,
-  paddingInline: 50,
-  lineHeight: "64px",
 };
 
 const contentStyle: React.CSSProperties = {

src/ui/Duel/main.tsx

@@ -25,6 +25,7 @@ import NeosConfig from "../../../neos.config.json";
 import DuelTimeLine from "./timeLine";
 import { Row } from "antd";
 import SendBox from "./sendBox";
+import PlayerStatus from "./status";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -47,9 +48,9 @@ const NeosDuel = () => {
     <>
       <NeosLayout
         sider={<NeosSider />}
-        header={<div>header</div>}
+        header={<PlayerStatus />}
         content={<NeosCanvas />}
-        footer={<div>footer</div>}
+        footer={<PlayerStatus />}
       />
       <CardModal />
       <CardListModal />

src/ui/Duel/status.tsx

+import React from "react";
+import { UserOutlined, BackwardOutlined } from "@ant-design/icons";
+import { Avatar, Space, Statistic } from "antd";
+
+const spaceSize = 20;
+const avatarSize = 40;
+
+const PlayerStatus = () => (
+  <Space size={spaceSize} direction="horizontal">
+    <Space wrap size={spaceSize}>
+      <Avatar size={avatarSize} icon={<UserOutlined />} />
+    </Space>
+    <Space wrap size={spaceSize}>
+      UserName
+    </Space>
+    <Space wrap size={spaceSize}>
+      <Statistic title="Hp" value={4000} />
+    </Space>
+    <Space wrap size={spaceSize}>
+      <Avatar
+        size={avatarSize}
+        style={{ color: "red" }}
+        icon={<BackwardOutlined />}
+      />
+    </Space>
+  </Space>
+);
+
+export default PlayerStatus;