@chakra-ui/react#BoxProps TypeScript Examples

The following examples show how to use @chakra-ui/react#BoxProps. 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: Card.tsx    From fresh-coupons with GNU General Public License v3.0 6 votes vote down vote up 
Card = (props: BoxProps) => (
  <Box
    maxW="3xl"
    position="relative"
    mx="auto"
    bg={useColorModeValue('white', 'gray.700')}
    rounded={{ md: 'xl' }}
    padding="10"
    shadow={{ md: 'base' }}
    px={{ base: '6', md: '8' }}
    {...props}
  />
)
Example #2
Source File: PoolPortal.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
DepositButton = (
  props: BoxProps & {
    onClick: () => any;
  }
) => {
  const { t } = useTranslation();

  return (
    <GlowingButton width="170px" height="50px" {...props}>
      {t("Deposit")}
    </GlowingButton>
  );
}
Example #3
Source File: GlowingButton.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
GlowingButton = ({
  children,
  onClick,
  leftIcon,
  disabled,
  ...boxProps
}: BoxProps & {
  leftIcon?: ReactElement;
  onClick: () => any;
  disabled?: boolean;
}) => {
  return (
    <GlowingBox {...boxProps}>
      <Button
        bg="#FFFFFF"
        color="#000000"
        borderRadius="7px"
        fontWeight="bold"
        width="100%"
        height="100%"
        leftIcon={leftIcon}
        onClick={onClick}
        isDisabled={disabled ?? false}
        _focus={{ boxShadow: "0 0 3pt 3pt #2F74AF" }}
        _disabled={{ cursor: "not-allowed" }}
        fontSize={boxProps.fontSize ?? "xl"}
      >
        {children}
      </Button>
    </GlowingBox>
  );
}
Example #4
Source File: GlowingButton.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
DarkGlowingButton = ({
  label,
  onClick,
  leftIcon,
  disabled,
  bg,
  ...boxProps
}: BoxProps & {
  leftIcon?: ReactElement;
  onClick: () => any;
  label: string;
  disabled?: boolean;
  bg?: any;
}) => {
  return (
    <DarkGlowingBox {...boxProps}>
      <Button
        color="#FFF"
        bg="#121212"
        borderRadius="7px"
        fontWeight="bold"
        width="100%"
        height="100%"
        leftIcon={leftIcon}
        onClick={onClick}
        isDisabled={disabled ?? false}
        _hover={{}}
        _active={{}}
        _focus={{ boxShadow: "0 0 3pt 3pt #2F74AF" }}
        _disabled={{ cursor: "not-allowed" }}
        fontSize={boxProps.fontSize ?? "xl"}
      >
        {label}
      </Button>
    </DarkGlowingBox>
  );
}
Example #5
Source File: ProgressBar.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
ProgressBar = ({
  percentageFilled,

  ...others
}: Props & BoxProps) => {
  return (
    <Box bg="#4D4D4D" width="100%" height="10px" borderRadius="6px" {...others}>
      <Box
        bg="#FFFFFF"
        width={percentageFilled * 100 + "%"}
        height="10px"
        borderRadius="6px"
      />
    </Box>
  );
}
Example #6
Source File: TabNav.tsx    From ledokku with MIT License 6 votes vote down vote up 
TabNav = (props: BoxProps) => (
  <HStack
    as="nav"
    spacing="5"
    fontSize="sm"
    lineHeight="5"
    alignItems="baseline"
    {...props}
  />
)
Example #7
Source File: TabNav.tsx    From ledokku with MIT License 6 votes vote down vote up 
TabNavLink = ({
  selected,
  ...props
}: TabNavLinkProps & BoxProps) => (
  <Link
    as={ReactRouterLink}
    py="3"
    px="0.5"
    color="gray.500"
    _hover={{
      textDecoration: 'none',
      color: 'black',
    }}
    {...(selected
      ? {
          borderBottom: '2px',
          borderColor: 'black',
          color: 'black',
          mb: '-1px',
        }
      : {})}
    {...props}
  />
)
Example #8
Source File: Terminal.tsx    From ledokku with MIT License 6 votes vote down vote up 
Terminal = (props: BoxProps) => (
  <Box
    mt="3"
    p="4"
    boxShadow="lg"
    borderRadius="lg"
    color="gray.100"
    backgroundColor="gray.900"
    fontSize="sm"
    fontFamily="mono"
    lineHeight="1.5"
    style={{ WebkitFontSmoothing: 'auto' }}
    {...props}
  />
)
Example #9
Source File: AvatarPreview.tsx    From openchakra with MIT License 6 votes vote down vote up 
AvatarPreview: React.FC<IPreviewProps & {
  spacing?: BoxProps['marginLeft']
  index?: number
}> = ({ component, spacing, index }) => {
  const { drop, isOver } = useDropComponent(component.id, ['AvatarBadge'])
  const { props, ref } = useInteractive(component)

  let boxProps: any = {
    display: 'inline-block',
    zIndex: index ? 20 - index : null,
  }

  props.p = 0

  if (isOver) {
    props.bg = 'teal.50'
  }

  return (
    <Box ref={drop(ref)} {...boxProps}>
      <Avatar ml={index === 0 ? 0 : spacing} {...props}>
        {component.children.map((key: string) => (
          <ComponentPreview key={key} componentName={key} />
        ))}
      </Avatar>
    </Box>
  )
}
Example #10
Source File: motion.tsx    From notebook with MIT License 5 votes vote down vote up 
MotionBox = motion.custom<BoxProps>(Box)
Example #11
Source File: MessagesBlock.tsx    From ke with MIT License 5 votes vote down vote up 
MessagesBlock = ({
  messages,
  messageType,
  messageProps,
  messageTextProps,
}: {
  messages: (string | JSX.Element)[] | undefined
  messageType: string
  messageProps?: BoxProps
  messageTextProps?: TextProps
}): JSX.Element => {
  if (typeof messages === 'undefined') return <></>

  const messageColor = messageTypeMapping[messageType]
  const messageIcon = messageIconMapping[messageType]

  return (
    <>
      {messages
        .filter((message: string | JSX.Element | null) => message !== null)
        .map((message: string | JSX.Element, index) => {
          const key = index
          return (
            <Box
              bg={messageColor}
              key={key}
              display="flex"
              borderRadius="4px"
              justifyContent="center"
              p={3}
              mt={4}
              sx={{
                '& + &': {
                  mt: 2,
                },
              }}
              {...messageProps}
            >
              <Box as={messageIcon} size="21px" mt="1px" flexShrink={0} />
              <Text ml={2} {...messageTextProps}>
                {message}
              </Text>
            </Box>
          )
        })}
    </>
  )
}
Example #12
Source File: CodeBlock.tsx    From lucide with ISC License 5 votes vote down vote up 
CodeContainer = (props: BoxProps) => (
  <Box paddingTop="3" paddingBottom="3" rounded="8px" height="100%" {...props} />
)
Example #13
Source File: DocsMenu.tsx    From lucide with ISC License 5 votes vote down vote up 
DocsMenu = (props: BoxProps) => {
  const router = useRouter();
  const linkIsActive = (currentPath, href) => currentPath === `/docs/${href}`;
  return (
    <Box {...props}>
      <Box paddingY={4}>
        {docsMenuTree.map(({ section, items }) => (
          <Box key={section}>
            <Text fontSize={19} fontWeight="bold" marginBottom={2}>
              {section}
            </Text>
            <Box as="ul" style={{ listStyle: 'none' }} marginBottom={6}>
              {items.map(({ href, title }) => (
                <Box as="li" key={title}>
                  <NextLink href={`/docs/${href}`} passHref>
                    <Link
                      _hover={{ opacity: linkIsActive(router.asPath, href) ? 1 : 0.8 }}
                      display="block"
                      color={linkIsActive(router.asPath, href) ? 'brand.500' : 'inherit'}
                    >
                      <Text
                        fontSize={16}
                        lineHeight={1.8}
                        opacity={linkIsActive(router.asPath, href) ? 1 : 0.5}
                        as="p"
                        width="100%"
                        display="block"
                      >
                        {title}
                      </Text>
                    </Link>
                  </NextLink>
                </Box>
              ))}
            </Box>
          </Box>
        ))}
      </Box>
    </Box>
  );
}
Example #14
Source File: Card.tsx    From phonepare with MIT License 5 votes vote down vote up 
Card: FC<BoxProps> = (props) => {
  return <Box textAlign='left' p={10} w={{ base: '100%', md: '400px' }} bg='gray.100' rounded='xl' {...props} _hover={{ bg: 'gray.200', cursor: 'pointer' }} />
}
Example #15
Source File: Label.tsx    From phonepare with MIT License 5 votes vote down vote up 
Label: FC<BoxProps> = (props) => {
  return <Box rounded='md' px={2} py={1} m={1} fontSize='sm' {...props} />
}