@chakra-ui/react#Code TypeScript Examples

The following examples show how to use @chakra-ui/react#Code. 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: UseHttpsField.tsx    From bluebubbles-server with Apache License 2.0 6 votes vote down vote up 
UseHttpsField = ({ helpText }: UseHttpsFieldProps): JSX.Element => {
    const useHttps: boolean = (useAppSelector(state => state.config.use_custom_certificate) ?? false);

    return (
        <FormControl>
            <Checkbox id='use_custom_certificate' isChecked={useHttps} onChange={onCheckboxToggle}>Use Custom Certificate</Checkbox>
            <FormHelperText>
                {helpText ?? (
                    <Text>
                        This will install a self-signed certificate at: <Code>~/Library/Application Support/bluebubbles-server/Certs</Code>
                        <br />
                        Note: Only use this this option if you have your own certificate! Replace the certificates in the <Code>Certs</Code> directory
                    </Text>
                )}
            </FormHelperText>
        </FormControl>
    );
}
Example #2
Source File: ErrorPage.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
ErrorPage: React.FC<FallbackProps> = ({ error }) => {
  const { t } = useTranslation();

  return (
    <Box color="white">
      <Box bg="red.600" width="100%" p={4}>
        <Heading>{t("Whoops! Looks like something went wrong!")}</Heading>
        <Text>
          {t(
            "You can either reload the page, or report this error to us on our"
          )}{" "}
          <Link isExternal href="https://github.com/Rari-Capital/rari-dApp">
            <u>GitHub</u>
            <ExternalLinkIcon mx="2px" />
          </Link>
        </Text>
      </Box>

      <Code colorScheme="red">{error.toString()}</Code>
    </Box>
  );
}
Example #3
Source File: htmrTransform.tsx    From website with MIT License 6 votes vote down vote up 
htmrTransform = {
  p: P,
  a: Link,
  h1: H1,
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  ul: UL,
  ol: OL,
  li: LI,
  code: Code
} as ComponentsType
Example #4
Source File: ComponentMapping.tsx    From coindrop with GNU General Public License v3.0 6 votes vote down vote up 
components = {
    h1: ({ children }) => <Heading as="h1" my="1.5rem" size="2xl">{children}</Heading>,
    h2: ({ children }) => <Heading as="h2" my="1.5rem" size="xl">{children}</Heading>,
    h3: ({ children }) => <Heading as="h3" my="1.5rem" size="lg">{children}</Heading>,
    h4: ({ children }) => <Heading as="h4" my="1.5rem" size="md">{children}</Heading>,
    p: ({ children }) => <Text mb="1.5rem" fontSize="lg">{children}</Text>,
    Center,
    ul: ({ children }) => <UnorderedList mb="1.5rem">{children}</UnorderedList>,
    ol: ({ children }) => <OrderedList mb="1.5rem">{children}</OrderedList>,
    li: ({ children }) => <ListItem fontSize="lg">{children}</ListItem>,
    Image,
    ImageBorder,
    code: Code,
    CodeBlock,
    a: ({ children, href }) => <u><Link href={href} isExternal>{children}</Link></u>,
    NextLink: ({ children, href }) => <u><NextLink href={href}>{children}</NextLink></u>,
}
Example #5
Source File: ComponentMapping.tsx    From coindrop with GNU General Public License v3.0 5 votes vote down vote up 
CodeBlock: FC = ({ children }) => (
    <Code
        display="block"
        overflowX="scroll"
    >
        {children}
    </Code>
)