Basic scaffold for managing equiped items

src/components/Equipment.tsx

@@ -0,0 +1,41 @@
+import { ItemsById } from "../lib/items";
+import type { State } from "../lib/state";
+import { Slots, type Item, type Slot } from "../lib/types";
+import { ItemLink } from "./ItemLink";
+import { ItemTypeahead } from "./ItemTypeahead";
+
+export type Props = {
+  state: State;
+  onEquip: (item: Item) => void;
+  onUnequip: (item: Item) => void;
+};
+
+export const Equipment = ({ state, onEquip, onUnequip }: Props) => (
+  <div>
+    <ItemTypeahead value={null} onSelect={onEquip} />
+    {Slots.map((slot) => (
+      <Slot state={state} slot={slot} onUnequip={onUnequip} key={slot} />
+    ))}
+  </div>
+);
+
+type SlotProps = {
+  state: State;
+  slot: Slot;
+  onUnequip: (item: Item) => void;
+};
+
+const Slot = ({ state, slot, onUnequip }: SlotProps) => (
+  <div>
+    {slot}:{" "}
+    {state.equipedItems
+      .map((item) => ({ ...item, item: ItemsById[item.id] }))
+      .filter((item) => item && item.item.slot === slot)
+      .map((item) => (
+        <span>
+          <ItemLink item={item.item} />({item.quality})
+          <button onClick={() => onUnequip(item.item)}>X</button>
+        </span>
+      ))}
+  </div>
+);