Adds source list.

src/components/Equipment.tsx

@@ -3,6 +3,7 @@ import type { State } from "../lib/state";
 import { Slots, type Item, type Slot } from "../lib/types";
 import { ItemLink } from "./ItemLink";
 import { ItemTypeahead } from "./ItemTypeahead";
+import styles from "./Equipment.module.css";
 
 export type Props = {
   state: State;
@@ -13,9 +14,11 @@ export type Props = {
 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 className={styles.equipedItems}>
+      {Slots.map((slot) => (
+        <Slot state={state} slot={slot} onUnequip={onUnequip} key={slot} />
+      ))}
+    </div>
   </div>
 );
 
@@ -26,16 +29,18 @@ type SlotProps = {
 };
 
 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>
+  <>
+    <div className={`${styles.slot} ${styles.gridItem}`}>{slot}</div>
+    <div className={styles.gridItem}>
+      {state.equipedItems
+        .map((item) => ({ ...item, item: ItemsById[item.id] }))
+        .filter((item) => item && item.item.slot === slot)
+        .map((item) => (
+          <div>
+            <ItemLink item={item.item} />({item.quality})
+            <button onClick={() => onUnequip(item.item)}>X</button>
+          </div>
+        ))}
+    </div>
+  </>
 );