OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

add WIP callout to item page

Browse source
This commit is contained in:
Emi Matchu 2020-10-10 02:17:21 -07:00
parent e7359ab51b
commit 1eca5d1e27
2 changed files with 47 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/ItemPage.js
View file

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

75
src/app/components/WIPCallout.js
View file

@ -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;