add WIP callout to user items page

src/app/UserItemsPage.js

@@ -15,6 +15,7 @@ import ItemCard, {
   YouWantThisBadge,
 } from "./components/ItemCard";
 import useCurrentUser from "./components/useCurrentUser";
+import WIPCallout from "./components/WIPCallout";
 
 function UserItemsPage() {
   const { userId } = useParams();
@@ -100,6 +101,9 @@ function UserItemsPage() {
 
   return (
     <Box>
+      <Box float="right">
+        <WIPCallout details="These lists are simplified and read-only for now. Full power coming soon!" />
+      </Box>
       <Heading1 marginBottom="6">
         {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
       </Heading1>

src/app/components/WIPCallout.js

@@ -0,0 +1,40 @@
+import React from "react";
+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>
+  );
+}
+
+export default WIPCallout;