adding link to block creation quest to "Add Block" modal 🃏

This commit is contained in:
W.J. “dysbulic” H
2022-10-02 20:29:24 -04:00
committed by Dan OneTree
parent 0b086e4c6e
commit d403a8ec4e
6 changed files with 67 additions and 33 deletions

View File

@@ -32,11 +32,12 @@
"city-timezones": "1.2.0",
"framer-motion": "6.2.8",
"next": "10.2.3",
"react-dom": "17.0.2",
"react-google-font-loader": "1.1.0",
"react-icons": "4.4.0",
"react-select": "5.2.2",
"react-timezone-select": "1.0.3",
"spacetime": "7.1.2",
"react-dom": "17.0.2",
"react-google-font-loader": "1.1.0",
"spacetime-informal": "0.6.1"
}
}

View File

@@ -5,18 +5,25 @@ type LinkProps = { href?: string; target?: '_blank' };
type RefProps = { ref?: React.Ref<HTMLButtonElement> };
export const MetaButton: React.FC<ButtonProps & LinkProps & RefProps> =
React.forwardRef<HTMLButtonElement>(({ children, ...props }, ref) => (
<Button
colorScheme="purple"
textTransform="uppercase"
px={12}
letterSpacing="0.1em"
size="lg"
fontSize="sm"
bg="purple.400"
color="white"
{...{ ref, ...props }}
>
{children}
</Button>
));
React.forwardRef<HTMLButtonElement>(({ children, ...props }, ref) => {
const args = props as LinkProps & ButtonProps;
if (args.href) {
args.as = 'a';
}
return (
<Button
colorScheme="purple"
textTransform="uppercase"
px={12}
letterSpacing="0.1em"
size="lg"
fontSize="sm"
bg="purple.400"
color="white"
{...{ ref, ...args }}
>
{children}
</Button>
);
});

View File

@@ -0,0 +1,4 @@
import { chakra } from '@chakra-ui/react';
import { FaExternalLinkAlt } from 'react-icons/fa';
export const ExternalLinkIcon = chakra(FaExternalLinkAlt);

View File

@@ -10,4 +10,5 @@ export { MetaMaskIcon } from './MetaMaskIcon';
export { PolygonIcon } from './PolygonIcon';
export { Profile } from './Profile';
// export { XDaiIcon } from './XDaiIcon'; // Replaced by Gnosis icon
export * from './ExternalLinkIcon';
export { GnosisIcon } from './GnosisIcon';

View File

@@ -1,7 +1,10 @@
import {
Box,
Button,
ExternalLinkIcon,
Flex,
FlexProps,
MetaButton,
MetaTheme,
Modal,
ModalBody,
@@ -153,22 +156,35 @@ export const AddBoxSection = React.forwardRef<HTMLDivElement, Props>(
</VStack>
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={addSection}
isDisabled={!type}
>
Save Block
</Button>
<Button
variant="ghost"
onClick={onClose}
color="white"
_hover={{ bg: 'none' }}
>
Close
</Button>
<Box mx="auto">
<Flex justify="center">
<Button
colorScheme="blue"
mr={3}
onClick={addSection}
isDisabled={!type}
>
Save Block
</Button>
<Button
variant="ghost"
onClick={onClose}
color="white"
_hover={{ bg: 'none' }}
>
Close
</Button>
</Flex>
<MetaButton
href="//metagame.wtf/quest/6524b99a-df7e-4c10-838d-c441a8417e77"
mx="auto"
mt="3rem"
target="_blank"
>
Create a Custom Block
<ExternalLinkIcon ml={3} />
</MetaButton>
</Box>
</ModalFooter>
</ModalContent>
</Modal>

View File

@@ -20511,6 +20511,11 @@ react-icons@4.3.1:
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
react-icons@4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
react-icons@^4.1.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"