From 2d700a610b2d7b2e89517e1a88189bb62575490d Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Thu, 23 Nov 2023 19:38:26 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A8=F0=9F=8F=BB=E2=80=8D=F0=9F=94=AC?= =?UTF-8?q?=F0=9F=90=9A=20=E2=86=9D=20Inventory/backpack=20page=20creation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Content/Inventory/ItemGroup.tsx | 414 +++++++++++++++++++++ components/Section/Layout.tsx | 4 +- pages/inventory/index.tsx | 14 + 3 files changed, 431 insertions(+), 1 deletion(-) create mode 100644 components/Content/Inventory/ItemGroup.tsx create mode 100644 pages/inventory/index.tsx diff --git a/components/Content/Inventory/ItemGroup.tsx b/components/Content/Inventory/ItemGroup.tsx new file mode 100644 index 00000000..80f92d7e --- /dev/null +++ b/components/Content/Inventory/ItemGroup.tsx @@ -0,0 +1,414 @@ +import React from "react"; + +export function InventoryMenu() { + return ( +
+
+
CONSUMABLES
+
+
+
wEAPONS
+
+
+
sPACE SUITS
+
+
+
rESOURCES
+
+
+
sPACE cRAFT
+
+
+
cRAFTING
+
+
+
bUILDINGS
+
+
+ ); +}; + +export function UserBackpackInventory() { + return ( +
+
+
+
BACKPACK
+
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
nO ITEM
+
+
+
+
+ ); +}; + +export default function InventoryItemsGroup() { + return ( +
+
+
+ INVENTORY +
+
+
+
+
+
+
+ CONSUMABLES +
+
+
+
+ wEAPONS +
+
+
+
+ sPACE SUITS +
+
+
+
+ rESOURCES +
+
+
+
+ sPACE cRAFT +
+
+
+
+ cRAFTING +
+
+
+
+ bUILDINGS +
+
+
+
+
+
+
+
+
+
+ Selected item +
+
+
+
+
+
+ IMAGE +
+
+
+
+
+
+
+ iTEM sTATS +
+
+
+
+
+ quantity: +
+
+ 4 +
+
+
+
+ Rarity: +
+
+ epic +
+
+
+
+
+
+
+
+
+
+ BACKPACK +
+
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+
+
+
+
+
+ SPACESHIP +
+
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+ nO ITEM +
+
+
+
+
+
+
+
+
+
+
+ users cHARCTER +
+
+
+
+
+
+ IMAGE +
+
+
+
+
+
+
+ PLAYER sTATS +
+
+
+
+ lvl: +
+
+ 12 +
+
+
+
+ atk: +
+
+ 32 +
+
+
+
+ def: +
+
+ 11 +
+
+
+
+ eND: +
+
+ 18 +
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/components/Section/Layout.tsx b/components/Section/Layout.tsx index e5139271..18d779c8 100644 --- a/components/Section/Layout.tsx +++ b/components/Section/Layout.tsx @@ -28,7 +28,9 @@ const Layout: React.FC = ({ children }) => { <>
- {children} +
+ {children} +
{isMobile && (
diff --git a/pages/inventory/index.tsx b/pages/inventory/index.tsx new file mode 100644 index 00000000..6590302a --- /dev/null +++ b/pages/inventory/index.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import InventoryItemsGroup, { InventoryMenu, UserBackpackInventory } from "../../components/Content/Inventory/ItemGroup"; +import Layout from "../../components/Section/Layout"; + +export default function Inventory() { + return ( + +
+ + +
+ + ) +} \ No newline at end of file