Create basic items page

src/handbook/src/backend/types.ts

@@ -1,4 +1,4 @@
-export type Page = "Home" | "Commands" | "Avatars";
+export type Page = "Home" | "Commands" | "Avatars" | "Items";
 
 export type Command = {
     name: string[];

src/handbook/src/css/pages/ItemsPage.scss

@@ -0,0 +1,31 @@
+.ItemsPage {
+    display: flex;
+    height: 100%;
+    width: 100%;
+
+    background-color: var(--background-color);
+    flex-direction: column;
+
+    padding: 24px;
+}
+
+.ItemsPage_Title {
+    max-width: 275px;
+    max-height: 60px;
+
+    font-size: 48px;
+    font-weight: bold;
+    text-align: center;
+
+    margin-bottom: 30px;
+}
+
+.ItemsPage_List {
+    display: grid;
+    gap: 15px 15px;
+
+    grid-template-columns: repeat(15, 100px);
+
+    margin-bottom: 28px;
+    overflow-y: scroll;
+}

src/handbook/src/ui/pages/HomePage.tsx

@@ -20,7 +20,7 @@ class HomePage extends React.Component<any, any> {
                     <div className={"HomePage_Buttons"}>
                         <HomeButton name={"Commands"} anchor={"Commands"} />
                         <HomeButton name={"Characters"} anchor={"Avatars"} />
-                        <HomeButton name={"Items"} anchor={"Home"} />
+                        <HomeButton name={"Items"} anchor={"Items"} />
                         <HomeButton name={"Entities"} anchor={"Home"} />
                         <HomeButton name={"Scenes"} anchor={"Home"} />
                     </div>

src/handbook/src/ui/pages/ItemsPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { getItems } from "@backend/data";
+
+import "@css/pages/ItemsPage.scss";
+
+class ItemsPage extends React.PureComponent {
+    render() {
+        return (
+            <div className={"ItemsPage"}>
+                <h1 className={"ItemsPage_Title"}>Items</h1>
+
+                <div className={"ItemsPage_List"}>
+                    {
+                        getItems().map(item => (
+                            <p key={item.id}>{item.name}</p>
+                        ))
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ItemsPage;

src/handbook/src/ui/views/Content.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import HomePage from "@pages/HomePage";
 import CommandsPage from "@pages/CommandsPage";
 import AvatarsPage from "@pages/AvatarsPage";
+import ItemsPage from "@pages/ItemsPage";
 
 import type { Page } from "@backend/types";
 import { addNavListener, removeNavListener } from "@backend/events";
@@ -50,6 +51,7 @@ class Content extends React.Component<IProps, IState> {
             case "Home": return <HomePage />;
             case "Commands": return <CommandsPage />;
             case "Avatars": return <AvatarsPage />;
+            case "Items": return <ItemsPage />;
         }
     }
 }

src/handbook/src/ui/views/SideBar.tsx

@@ -24,7 +24,7 @@ class SideBar extends React.Component<any, any> {
                 <div className={"SideBar_Buttons"}>
                     <SideBarButton name={"Commands"} anchor={"Commands"} />
                     <SideBarButton name={"Characters"} anchor={"Avatars"} />
-                    <SideBarButton name={"Items"} anchor={"Home"} />
+                    <SideBarButton name={"Items"} anchor={"Items"} />
                     <SideBarButton name={"Entities"} anchor={"Home"} />
                     <SideBarButton name={"Scenes"} anchor={"Home"} />
                     <SideBarButton name={"Quests"} anchor={"Home"} />