refactor ItemPage a bit

to prepare the way for the other content

src/app/ItemPage.js

@@ -47,6 +47,14 @@ function ItemPage() {
 
   const { item } = data;
 
+  return (
+    <Box>
+      <ItemPageHeader item={item} />
+    </Box>
+  );
+}
+
+function ItemPageHeader({ item }) {
   return (
     <Box display="flex" alignItems="center">
       <ItemThumbnail
@@ -58,6 +66,14 @@ function ItemPage() {
       />
       <Box>
         <Heading1 lineHeight="1.1">{item.name}</Heading1>
+        <ItemPageBadges item={item} />
+      </Box>
+    </Box>
+  );
+}
+
+function ItemPageBadges({ item }) {
+  return (
     <ItemBadgeList>
       {item.isNc ? <NcBadge /> : <NpBadge />}
       <LinkBadge
@@ -110,8 +126,6 @@ function ItemPage() {
         </LinkBadge>
       )}
     </ItemBadgeList>
-      </Box>
-    </Box>
   );
 }