@chakra-ui/react#useBreakpointValue TypeScript Examples

The following examples show how to use @chakra-ui/react#useBreakpointValue. 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: NewsBody.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up 
NewsBody = ({ posts, hasMore }: DopePostBodyProps) => {
  const router = useRouter();
  const isTabletOrMobile = useBreakpointValue({ base: true, md: false });
  const page = useCurrentPageNumber();
  const heroPost = posts[0];
  const { leftPosts, middlePosts, rightPosts } = splitPosts(posts.slice(1), isTabletOrMobile);

  if (!heroPost)
    return (
      <Body>
        <Text fontSize="xl" textAlign="center" textTransform="uppercase" paddingTop="6">
          no posts found
        </Text>
      </Body>
    );

  return (
    <Body>
      <Flex width="full" flexWrap="wrap" justifyContent="space-between">
        {Boolean(leftPosts.length) && (
          <LeftPosts flex={3} padding="0 10px">
            {leftPosts.map((post, index) => {
              return (
                <NewsClipping key={post.slug} post={post} titleSize={index == 0 ? 'xl' : 'md'} />
              );
            })}
          </LeftPosts>
        )}
        <MiddlePosts
          flex={{ base: 1, md: 5 }}
          textAlign={{ base: 'center', md: 'unset' }}
          padding="0 8px"
          borderRight={{ md: '1px solid black' }}
          borderLeft={{ md: '1px solid black' }}
        >
          <NewsClipping key={heroPost.slug} post={heroPost} showImage titleSize="4xl" />
          {middlePosts.map(post => (
            <NewsClipping key={post.slug} post={post} titleSize="xl" />
          ))}
        </MiddlePosts>
        <RightPosts flex={{ base: 1, md: 3 }} padding={{ base: '0 4px', md: '0 10px' }}>
          {rightPosts.map((post, index) => {
            return (
              <NewsClipping
                key={post.slug}
                post={post}
                titleSize={index == 0 && !isTabletOrMobile ? 'md' : 'xl'}
              />
            );
          })}
        </RightPosts>
      </Flex>
      <Flex justifyContent="center">
        <Button
          width="full"
          maxW="100px"
          marginRight="10px"
          isDisabled={page - 1 <= 0}
          onClick={() => router.push({ pathname: '/news', query: { page: page - 1 } })}
        >
          {'< previous'}
        </Button>
        <Button
          width="full"
          maxW="100px"
          isDisabled={!hasMore}
          onClick={() => router.push({ pathname: '/news', query: { page: page + 1 } })}
        >
          {'next >'}
        </Button>
      </Flex>
    </Body>
  );
}
Example #2
Source File: Layout.tsx    From lucide with ISC License 4 votes vote down vote up 
Layout = ({ aside, children }: LayoutProps) => {
  const router = useRouter();
  const { toggleMobileMenu } = useMobileNavigationContext();
  const { toggleColorMode } = useColorMode();
  const currentColorMode = useColorModeValue('dark', 'light');
  const ColorModeToggle = useColorModeValue(Moon, Sun);
  const MobileMenuToggle = useMobileNavigationValue(Menu, X);
  const showBaseNavigation = useBreakpointValue({ base: false, md: true });
  const IconbuttonProps = {
    size: 'md',
    fontSize: 'lg',
    variant: 'ghost',
    color: 'current',
    ml: '3',
  };

  function setQuery(query) {
    router.push({
        pathname: '/',
        query: { query: query },
    },
    undefined,
    { shallow: true })
  }

  useKeyBindings({
    Escape: {
      fn: () => setQuery(''),
    },
    KeyT: {
      fn: () => toggleColorMode(),
    },
  });

  return (
    <Box h="100vh">
      <Flex mb={16} w="full">
        <Flex
          alignItems="center"
          justifyContent="space-between"
          pt={4}
          pb={4}
          margin="0 auto"
          w="full"
          px={5}
        >
          <Flex justifyContent="center" alignItems="center">
            <Logo />
          </Flex>
          <Flex justifyContent="center" alignItems="center">
            {showBaseNavigation ? (
              <>
                <NextLink href="/docs" passHref>
                  <Link marginRight={12} fontSize="xl">
                    Documentation
                  </Link>
                </NextLink>
                <NextLink href="/packages" passHref>
                  <Link marginRight={12} fontSize="xl">
                    Packages
                  </Link>
                </NextLink>
                <NextLink href="/license" passHref>
                  <Link marginRight={12} fontSize="xl">
                    License
                  </Link>
                </NextLink>
                <Link
                  href="https://github.com/lucide-icons/lucide"
                  isExternal
                  marginRight={6}
                  fontSize="xl"
                >
                  Github
                </Link>
              </>
            ) : null}
            <IconButton
              aria-label={`Switch to ${currentColorMode} mode`}
              onClick={toggleColorMode}
              {...IconbuttonProps}
              icon={<ColorModeToggle />}
            />
            {!showBaseNavigation ? (
              <IconButton
                aria-label={`Open Mobile menu`}
                onClick={toggleMobileMenu}
                {...IconbuttonProps}
                icon={<MobileMenuToggle />}
              />
            ) : null}
          </Flex>
        </Flex>
      </Flex>
      <Flex>
        {aside ? <Box as="aside" marginRight={{ base: 0, lg: -240, }}>{aside}</Box> : null}
        <Flex margin="0 auto" direction="column" maxW="1250px" px={5} width="100%">
          {children}
          <Divider mb={6} mt={12} />
          <p style={{ alignSelf: 'center' }}>
            <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
              <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
            </a>
          </p>
          <br />
        </Flex>
      </Flex>
    </Box>
  );
}