From 1eca5d1e27de57171d1a7d890f75c23bc5f157d9 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 10 Oct 2020 02:17:21 -0700
Subject: [PATCH] add WIP callout to item page

---
 src/app/ItemPage.js              |  2 +
 src/app/components/WIPCallout.js | 75 +++++++++++++++++++-------------
 2 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index d2e792c..04fb96e 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -42,6 +42,7 @@ import {
 import OutfitPreview from "./components/OutfitPreview";
 import SpeciesColorPicker from "./components/SpeciesColorPicker";
 import { useLocalStorage } from "./util";
+import WIPCallout from "./components/WIPCallout";
 
 function ItemPage() {
   const { itemId } = useParams();
@@ -59,6 +60,7 @@ export function ItemPageContent({ itemId, isEmbedded }) {
       <ItemPageHeader itemId={itemId} isEmbedded={isEmbedded} />
       <ItemPageOwnWantButtons itemId={itemId} />
       {!isEmbedded && <ItemPageOutfitPreview itemId={itemId} />}
+      <WIPCallout>Trade lists coming soon!</WIPCallout>
     </VStack>
   );
 }
diff --git a/src/app/components/WIPCallout.js b/src/app/components/WIPCallout.js
index c19792e..ec3a785 100644
--- a/src/app/components/WIPCallout.js
+++ b/src/app/components/WIPCallout.js
@@ -4,37 +4,52 @@ import { Box, Flex, Tooltip } from "@chakra-ui/core";
 import WIPXweeImg from "../../images/wip-xwee.png";
 import WIPXweeImg2x from "../../images/wip-xwee@2x.png";
 
-function WIPCallout({ details }) {
-  return (
-    <Tooltip label={<Box textAlign="center">{details}</Box>} placement="bottom">
-      <Flex
-        alignItems="center"
-        border="1px solid"
-        borderColor="green.600"
-        borderRadius="full"
-        boxShadow="md"
-        paddingLeft="2"
-        paddingRight="4"
-        paddingY="1"
-        fontSize="sm"
-        tabIndex="0"
-      >
-        <Box
-          as="img"
-          src={WIPXweeImg}
-          srcSet={`${WIPXweeImg} 1x, ${WIPXweeImg2x} 2x`}
-          alt=""
-          width="36px"
-          height="36px"
-          marginRight="2"
-        />
-        <Box display={{ base: "none", md: "block" }}>
-          We're working on this page!
-        </Box>
-        <Box display={{ base: "block", md: "none" }}>WIP!</Box>
-      </Flex>
-    </Tooltip>
+function WIPCallout({ children, details }) {
+  let content = (
+    <Flex
+      alignItems="center"
+      border="1px solid"
+      borderColor="green.600"
+      borderRadius="full"
+      boxShadow="md"
+      paddingLeft="2"
+      paddingRight="4"
+      paddingY="1"
+      fontSize="sm"
+    >
+      <Box
+        as="img"
+        src={WIPXweeImg}
+        srcSet={`${WIPXweeImg} 1x, ${WIPXweeImg2x} 2x`}
+        alt=""
+        width="36px"
+        height="36px"
+        marginRight="2"
+      />
+      {children || (
+        <>
+          <Box display={{ base: "none", md: "block" }}>
+            We're working on this page!
+          </Box>
+          <Box display={{ base: "block", md: "none" }}>WIP!</Box>
+        </>
+      )}
+    </Flex>
   );
+
+  if (details) {
+    content = (
+      <Tooltip
+        label={<Box textAlign="center">{details}</Box>}
+        placement="bottom"
+        shouldWrapChildren
+      >
+        {content}
+      </Tooltip>
+    );
+  }
+
+  return content;
 }
 
 export default WIPCallout;