diff --git a/src/handbook/src/backend/types.ts b/src/handbook/src/backend/types.ts index 4ded0f43e..c1fbeeff2 100644 --- a/src/handbook/src/backend/types.ts +++ b/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[]; diff --git a/src/handbook/src/css/pages/ItemsPage.scss b/src/handbook/src/css/pages/ItemsPage.scss new file mode 100644 index 000000000..6c5be5b65 --- /dev/null +++ b/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; +} diff --git a/src/handbook/src/ui/pages/HomePage.tsx b/src/handbook/src/ui/pages/HomePage.tsx index 9eefebbc9..463238980 100644 --- a/src/handbook/src/ui/pages/HomePage.tsx +++ b/src/handbook/src/ui/pages/HomePage.tsx @@ -20,7 +20,7 @@ class HomePage extends React.Component {
- +
diff --git a/src/handbook/src/ui/pages/ItemsPage.tsx b/src/handbook/src/ui/pages/ItemsPage.tsx new file mode 100644 index 000000000..44bee062c --- /dev/null +++ b/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 ( +
+

Items

+ +
+ { + getItems().map(item => ( +

{item.name}

+ )) + } +
+
+ ); + } +} + +export default ItemsPage; diff --git a/src/handbook/src/ui/views/Content.tsx b/src/handbook/src/ui/views/Content.tsx index 866ffa558..80efba867 100644 --- a/src/handbook/src/ui/views/Content.tsx +++ b/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 { case "Home": return ; case "Commands": return ; case "Avatars": return ; + case "Items": return ; } } } diff --git a/src/handbook/src/ui/views/SideBar.tsx b/src/handbook/src/ui/views/SideBar.tsx index 3b69f53f9..8b8c95d2a 100644 --- a/src/handbook/src/ui/views/SideBar.tsx +++ b/src/handbook/src/ui/views/SideBar.tsx @@ -24,7 +24,7 @@ class SideBar extends React.Component {
- +