41 lines
1 KiB
JavaScript
41 lines
1 KiB
JavaScript
|
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;
|