add sendBox.tsx

src/ui/Duel/main.tsx

@@ -23,6 +23,8 @@ import NeosLayout from "./layout";
 import { initStrings } from "../../api/strings";
 import NeosConfig from "../../../neos.config.json";
 import DuelTimeLine from "./timeLine";
+import { Row } from "antd";
+import SendBox from "./sendBox";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -44,7 +46,7 @@ const NeosDuel = () => {
   return (
     <>
       <NeosLayout
-        sider={<DuelTimeLine />}
+        sider={<NeosSider />}
         header={<div>header</div>}
         content={<NeosCanvas />}
         footer={<div>footer</div>}
@@ -61,6 +63,17 @@ const NeosDuel = () => {
   );
 };
 
+const NeosSider = () => (
+  <div>
+    <Row>
+      <DuelTimeLine />
+    </Row>
+    <Row align="bottom">
+      <SendBox />
+    </Row>
+  </div>
+);
+
 const NeosCanvas = () => (
   <ReactReduxContext.Consumer>
     {({ store }) => (

src/ui/Duel/sendBox.tsx

+import React, { useState } from "react";
+import { Input, Button, Row } from "antd";
+import { SendOutlined } from "@ant-design/icons";
+
+const SendBox = () => {
+  const [content, setContent] = useState("");
+  return (
+    <>
+      <Row>
+        <Input.TextArea
+          placeholder="Message to sent..."
+          autoSize
+          value={content}
+          onChange={(e) => {
+            setContent(e.target.value);
+          }}
+        />
+      </Row>
+      <Row>
+        <Button
+          icon={<SendOutlined />}
+          onClick={() => {}}
+          disabled={!content}
+        />
+      </Row>
+    </>
+  );
+};
+
+export default SendBox;

src/ui/Duel/timeLine.tsx

@@ -2,21 +2,25 @@ import React from "react";
 import { Timeline } from "antd";
 import { UserOutlined, SettingOutlined } from "@ant-design/icons";
 
-const DuelTimeLine = () => <Timeline items={[
-  {
-    dot: <UserOutlined />,
-    children: "对手消息",
-    color: "red"
-  },
-  {
-    dot: <UserOutlined />,
-    children: "自己消息",
-    color: "green"
-  },
-  {
-    dot: <SettingOutlined />,
-    children: '系统消息',
-  },
-]} />;
+const DuelTimeLine = () => (
+  <Timeline
+    items={[
+      {
+        dot: <UserOutlined />,
+        children: "对手消息",
+        color: "red",
+      },
+      {
+        dot: <UserOutlined />,
+        children: "自己消息",
+        color: "green",
+      },
+      {
+        dot: <SettingOutlined />,
+        children: "系统消息",
+      },
+    ]}
+  />
+);
 
 export default DuelTimeLine;