feat(web): add item class column to item lists

packages/spelunker-web/src/components/entities/Item/Class.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { gql } from '@apollo/client';
+
+const ItemClass = ({ itemClass }) => (
+  <div>
+    {itemClass.name}
+  </div>
+);
+
+ItemClass.fragment = gql`
+  fragment ItemClass on Item {
+    itemClass {
+      id
+      name
+    }
+  }
+`;
+
+export default ItemClass;

packages/spelunker-web/src/components/entities/Item/columns/ClassColumn.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import ItemClass from '../Class';
+
+const ItemClassColumn = ({ value: item }) => (
+  <ItemClass itemClass={item.itemClass} />
+);
+
+ItemClassColumn.defaultProps = {
+  id: 'itemClass',
+  label: 'Item Class',
+};
+
+export default ItemClassColumn;

packages/spelunker-web/src/components/entities/Item/columns/index.jsx

@@ -2,24 +2,30 @@ import React from 'react';
 import { gql } from '@apollo/client';
 
 import ItemReference from '../Reference';
+import ItemClass from '../Class';
 import { IDColumn } from '../../../core';
 
 import ItemReferenceColumn from './ReferenceColumn';
+import ItemClassColumn from './ClassColumn';
 
 const columns = [
   <IDColumn />,
   <ItemReferenceColumn />,
+  <ItemClassColumn />,
 ];
 
 columns.fragment = gql`
   fragment itemColumns on Item {
     ...ItemReference
+    ...ItemClass
   }
 
   ${ItemReference.fragment}
+  ${ItemClass.fragment}
 `;
 
 export {
   ItemReferenceColumn,
+  ItemClassColumn,
   columns as default,
 };