1  import { useState } from "preact/hooks";
 2  import Phase from "../components/Phase.tsx"
 3  
 4  export interface IItem {
 5    itemName: string
 6  }
 7  
 8  export default function Inventory() {
 9    const [items, setItem] = useState<IItem[]>([]);
10  
11    const addToInventory = (i: IItem) => {
12        setItem([...items, i])
13    }
14  
15    return (
16      <div class="items-center justify-start h-1/2 w-4/5">
17        <p class="font-mono p-3 mx-3">inventory</p>
18        <div class="border-2 border-solid rounded-lg h-96">
19          {
20            items.map(item => {
21              return (
22                <p class="font-mono p-3 mx-3">{ item.itemName }</p>
23              )
24            })
25          }
26        </div>
27        {Phase.value.isItemAvailable &&
28          <button
29            class="text-center border-2 border-solid rounded-lg font-mono p-3 mx-3 my-3 bg-green-100 hover:bg-green-400"
30            onClick={ () => addToInventory({ itemName: Phase.value.item }) }
31          >
32            pick up
33          </button>
34        }
35      </div>
36    );
37  }