add WIP callout to item page

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>
   );
 }

src/app/components/WIPCallout.js

@@ -4,9 +4,8 @@ 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 }) {
+function WIPCallout({ children, details }) {
-  return (
+  let content = (
-    <Tooltip label={<Box textAlign="center">{details}</Box>} placement="bottom">
     <Flex
       alignItems="center"
       border="1px solid"
@@ -17,7 +16,6 @@ function WIPCallout({ details }) {
       paddingRight="4"
       paddingY="1"
       fontSize="sm"
-        tabIndex="0"
     >
       <Box
         as="img"
@@ -28,13 +26,30 @@ function WIPCallout({ details }) {
         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;