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