add timeLine.tsx

package.json

@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/sql.js": "^1.4.4",
-    "antd": "^5.0.7",
+    "antd": "^5.2.3",
     "axios": "^0.27.2",
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",

src/ui/Duel/layout.tsx

@@ -23,6 +23,10 @@ const contentStyle: React.CSSProperties = {
 const siderStyle: React.CSSProperties = {
   textAlign: "center",
   lineHeight: "120px",
+  position: "fixed",
+  overflow: "auto",
+  height: "100vh",
+  padding: "50px 20px",
   color: "#fff",
 };
 

src/ui/Duel/main.tsx

@@ -22,6 +22,7 @@ import ExtraDeck from "./extraDeck";
 import NeosLayout from "./layout";
 import { initStrings } from "../../api/strings";
 import NeosConfig from "../../../neos.config.json";
+import DuelTimeLine from "./timeLine";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -43,7 +44,7 @@ const NeosDuel = () => {
   return (
     <>
       <NeosLayout
-        sider={<div>sider</div>}
+        sider={<DuelTimeLine />}
         header={<div>header</div>}
         content={<NeosCanvas />}
         footer={<div>footer</div>}

src/ui/Duel/timeLine.tsx

+import React from "react";
+import { Timeline } from "antd";
+
+const DuelTimeLine = () => <Timeline items={[]} />;
+
+export default DuelTimeLine;