react-icons/fa#FaBomb TypeScript Examples

The following examples show how to use react-icons/fa#FaBomb. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AppErrorBoundary.tsx    From openchakra with MIT License 5 votes vote down vote up 
render() {
    if (this.state.hasError) {
      return (
        <Flex
          {...gridStyles}
          p={0}
          alignItems="center"
          justifyContent="center"
          flex={1}
          position="relative"
          height="100vh"
        >
          <Stack
            alignItems="center"
            direction="row"
            spacing={8}
            bg="white"
            px={6}
            py={6}
            boxShadow="sm"
            width="lg"
          >
            <Box as={FaBomb} fontSize="100px" />
            <Box>
              <b>Oups…</b>
              <br />
              Something went wrong! Clear cache and refresh.
              <Button
                onClick={() => {
                  localStorage.clear()
                  window.location.reload()
                }}
                variant="outline"
                rightIcon={<CheckCircleIcon path="" />}
                size="sm"
                mt={4}
                display="block"
              >
                Clear & reload
              </Button>
            </Box>
          </Stack>
        </Flex>
      )
    }

    return this.props.children
  }
Example #2
Source File: EditorErrorBoundary.tsx    From openchakra with MIT License 5 votes vote down vote up 
render() {
    if (this.state.hasError) {
      this.props.undo()

      return (
        <Flex
          {...gridStyles}
          alignItems="center"
          justifyContent="center"
          flex={1}
          position="relative"
        >
          <Stack
            alignItems="center"
            direction="row"
            spacing={8}
            bg="white"
            px={6}
            py={6}
            boxShadow="sm"
            width="lg"
          >
            <Box as={FaBomb} fontSize="100px" />
            <Box>
              <b>Oups…</b>
              <br />
              Something went wrong! We have recovered the editor to its previous
              version.
              <Button
                onClick={() => {
                  this.setState({ hasError: false })
                }}
                variant="outline"
                rightIcon={<CheckCircleIcon path="" />}
                size="sm"
                mt={4}
                display="block"
              >
                Reload
              </Button>
            </Box>
          </Stack>
        </Flex>
      )
    }

    return this.props.children
  }
Example #3
Source File: HeaderMenu.tsx    From openchakra with MIT License 5 votes vote down vote up 
HeaderMenu = () => {
  return (
    <Menu placement="bottom">
      <CustomMenuButton
        rightIcon={<ChevronDownIcon path="" />}
        size="xs"
        variant="ghost"
        colorScheme="gray"
      >
        Editor
      </CustomMenuButton>
      <Portal>
        <LightMode>
          <MenuList bg="white" zIndex={999}>
            {process.env.NEXT_PUBLIC_IS_V1 && (
              <MenuItemLink isExternal href="https://v0.openchakra.app">
                <Box mr={2} as={GoArchive} />
                Chakra v0 Editor
              </MenuItemLink>
            )}
            <ExportMenuItem />
            <ImportMenuItem />

            <MenuDivider />

            <MenuItemLink
              isExternal
              href="https://chakra-ui.com/getting-started"
            >
              <Box mr={2} as={GoRepo} />
              Chakra UI Docs
            </MenuItemLink>
            <MenuItemLink href="https://github.com/premieroctet/openchakra/issues">
              <Box mr={2} as={FaBomb} />
              Report issue
            </MenuItemLink>
          </MenuList>
        </LightMode>
      </Portal>
    </Menu>
  )
}