create very basic modeling page, not useful yet!

src/app/App.js

@@ -12,6 +12,7 @@ import PageLayout from "./PageLayout";
 
 const ItemsPage = loadable(() => import("./ItemsPage"));
 const HomePage = loadable(() => import("./HomePage"));
+const ModelingPage = loadable(() => import("./ModelingPage"));
 const WardrobePage = loadable(() => import("./WardrobePage"));
 
 const theme = {
@@ -54,6 +55,11 @@ function App() {
                   <ItemsPage />
                 </PageLayout>
               </Route>
+              <Route path="/modeling">
+                <PageLayout>
+                  <ModelingPage />
+                </PageLayout>
+              </Route>
               <Route path="/">
                 <PageLayout hideHomeLink>
                   <HomePage />

src/app/ModelingPage.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Box } from "@chakra-ui/core";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/client";
+
+import HangerSpinner from "./components/HangerSpinner";
+import { Heading1 } from "./util";
+
+function ModelingPage() {
+  return (
+    <Box>
+      <Heading1 marginBottom="2">Modeling Hub</Heading1>
+      <ItemModelsList />
+    </Box>
+  );
+}
+
+function ItemModelsList() {
+  const { loading, error, data } = useQuery(gql`
+    query ModelingPage {
+      itemsThatNeedModels {
+        id
+        name
+        thumbnailUrl
+        speciesThatNeedModels {
+          id
+          name
+        }
+      }
+    }
+  `);
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center">
+        <HangerSpinner />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return <Box color="red.400">{error.message}</Box>;
+  }
+
+  const items = [...data.itemsThatNeedModels].sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
+  return (
+    <Box as="ul">
+      {items.map((item) => (
+        <ItemModelCard item={item} />
+      ))}
+    </Box>
+  );
+}
+
+function ItemModelCard({ item }) {
+  return (
+    <Box as="li" listStyleType="none" boxShadow="lg">
+      {item.name}
+    </Box>
+  );
+}
+
+export default ModelingPage;

src/app/components/HangerSpinner.js

@@ -16,7 +16,9 @@ const HangerIcon = createIcon({
   ),
 });
 
-function HangerSpinner(props) {
+function HangerSpinner({ size = "md", ...props }) {
+  const boxSize = { sm: "32px", md: "48px" }[size];
+
   return (
     <>
       <Box
@@ -83,7 +85,7 @@ function HangerSpinner(props) {
         `}
         {...props}
       >
-        <HangerIcon color="green.300" {...props} />
+        <HangerIcon color="green.300" boxSize={boxSize} {...props} />
       </Box>
     </>
   );