From b23f64ad53c34c56cce7c8aceac1c94594adec88 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 14 Aug 2020 22:01:04 -0700
Subject: [PATCH] show DTI ID in item support drawer

helps make looking stuff up easier!
---
 .../support/ItemLayerSupportModal.js          | 31 +--------------
 .../WardrobePage/support/ItemSupportDrawer.js | 17 ++++----
 src/app/WardrobePage/support/Metadata.js      | 39 +++++++++++++++++++
 3 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 src/app/WardrobePage/support/Metadata.js

diff --git a/src/app/WardrobePage/support/ItemLayerSupportModal.js b/src/app/WardrobePage/support/ItemLayerSupportModal.js
index bc0147b..b608209 100644
--- a/src/app/WardrobePage/support/ItemLayerSupportModal.js
+++ b/src/app/WardrobePage/support/ItemLayerSupportModal.js
@@ -24,6 +24,7 @@ import {
 import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportUploadModal from "./ItemLayerSupportUploadModal";
+import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import SpeciesColorPicker from "../../components/SpeciesColorPicker";
 import useOutfitAppearance, {
@@ -341,34 +342,4 @@ function ItemLayerSupportPetCompatibilityFields({
   );
 }
 
-function Metadata({ children }) {
-  return (
-    <Box
-      as="dl"
-      display="grid"
-      gridTemplateColumns="max-content auto"
-      gridRowGap="1"
-      gridColumnGap="2"
-    >
-      {children}
-    </Box>
-  );
-}
-
-function MetadataLabel({ children }) {
-  return (
-    <Box as="dt" gridColumn="1" fontWeight="bold">
-      {children}
-    </Box>
-  );
-}
-
-function MetadataValue({ children }) {
-  return (
-    <Box as="dd" gridColumn="2">
-      {children}
-    </Box>
-  );
-}
-
 export default ItemLayerSupportModal;
diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 55bc806..243d18f 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -27,6 +27,7 @@ import {
 import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportModal from "./ItemLayerSupportModal";
+import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import useOutfitAppearance from "../../components/useOutfitAppearance";
 import { OutfitStateContext } from "../useOutfitState";
@@ -73,13 +74,15 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
               Support <span aria-hidden="true">💖</span>
             </Badge>
           </DrawerHeader>
-          <DrawerBody>
-            <Box paddingBottom="5">
-              <Stack spacing="8">
-                <ItemSupportFields item={item} />
-                <ItemSupportAppearanceLayers item={item} />
-              </Stack>
-            </Box>
+          <DrawerBody paddingBottom="5">
+            <Metadata>
+              <MetadataLabel>DTI ID:</MetadataLabel>
+              <MetadataValue>{item.id}</MetadataValue>
+            </Metadata>
+            <Stack spacing="8" marginTop="6">
+              <ItemSupportFields item={item} />
+              <ItemSupportAppearanceLayers item={item} />
+            </Stack>
           </DrawerBody>
         </DrawerContent>
       </DrawerOverlay>
diff --git a/src/app/WardrobePage/support/Metadata.js b/src/app/WardrobePage/support/Metadata.js
new file mode 100644
index 0000000..9063ed2
--- /dev/null
+++ b/src/app/WardrobePage/support/Metadata.js
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Box } from "@chakra-ui/core";
+
+/**
+ * Metadata is a UI component for showing metadata about something, as labels
+ * and their values.
+ */
+function Metadata({ children }) {
+  return (
+    <Box
+      as="dl"
+      display="grid"
+      gridTemplateColumns="max-content auto"
+      gridRowGap="1"
+      gridColumnGap="2"
+    >
+      {children}
+    </Box>
+  );
+}
+
+function MetadataLabel({ children }) {
+  return (
+    <Box as="dt" gridColumn="1" fontWeight="bold">
+      {children}
+    </Box>
+  );
+}
+
+function MetadataValue({ children }) {
+  return (
+    <Box as="dd" gridColumn="2">
+      {children}
+    </Box>
+  );
+}
+
+export default Metadata;
+export { MetadataLabel, MetadataValue };