@chakra-ui/react#VisuallyHidden TypeScript Examples

The following examples show how to use @chakra-ui/react#VisuallyHidden. 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: Navbar.tsx    From takeout-app with MIT License 6 votes vote down vote up 
Navbar: React.FC = () => {
  const { data: conferenceData } = Api.useConference();

  // TODO: bgImage...

  return (
    <Flex as="nav" justify="space-between" alignItems="center" w="100%" h="56px" px="15px" bgColor={Colors.bg}>
      <Heading as="h1" size="lg" fontSize="22px" css={{ "& svg": { height: "22px", width: "auto" } }}>
        {conferenceData?.conference ? (
          <Link as={RouterLink} to={`/tracks/${conferenceData.conference.default_track}`} color={Colors.main}>
            <VisuallyHidden>RubyKaigi Takeout 2021</VisuallyHidden>
            <Logo />
          </Link>
        ) : (
          <Text as="span" color={Colors.main}>
            <VisuallyHidden>RubyKaigi Takeout 2021</VisuallyHidden>
            <Logo />
          </Text>
        )}
      </Heading>
      <HStack spacing="14px">
        <Link href="https://rubykaigi.org/2021-takeout/schedule" isExternal>
          <VisuallyHidden>Schedule</VisuallyHidden>
          <EventNoteIcon boxSize="20px" color={Colors.defaultAvatarBg} />
        </Link>
        <Link as={RouterLink} to="/attendee">
          <VisuallyHidden>Edit your chat profile</VisuallyHidden>
          <AccountCircleIcon boxSize="20px" color={Colors.defaultAvatarBg} />
        </Link>
      </HStack>
    </Flex>
  );
}
Example #2
Source File: Login.tsx    From takeout-app with MIT License 5 votes vote down vote up 
Login: React.FC = () => {
  return (
    <Box w="100%" h="100%" minH="100vh" bgColor={Colors.bg} py={["20px", "20px", "20px", "165px"]}>
      <Container maxW={["auto", "auto", "auto", "780px"]} w="100%">
        <Flex
          direction={["column", "column", "column", "row"]}
          justifyContent="space-around"
          alignItems="top"
          mx="15px"
        >
          <Box maxW="331px" w="100%" mb="15px" display="flex" direction="row" alignItems="center">
            <picture>
              <source type="image/webp" srcSet="/assets/hero_hamburger.webp" />
              <Image src="/assets/hero_hamburger.svg" w="100%" />
            </picture>
          </Box>
          <Box>
            <VStack>
              <Box>
                <Heading
                  as="h1"
                  w={["100%", "100%", "360px", "360px"]}
                  h="auto"
                  color={Colors.main}
                  css={{ "& svg": { maxWidth: "100%", height: "auto" } }}
                >
                  <Logo />
                  <VisuallyHidden>RubyKaigi Takeout 2021 Streaming Login</VisuallyHidden>
                </Heading>
                <Flex direction="row-reverse">
                  <Box mr="-10px">
                    <StreamingLogo />
                  </Box>
                </Flex>
              </Box>
              <Box textAlign="center" pt="30px">
                <Text>
                  A paid ticket is required to access this virtual conference.{" "}
                  <Link isExternal href="https://ti.to/rubykaigi/takeout-2021" textDecoration="underline">
                    Register now.
                  </Link>
                </Text>
              </Box>
              <LoginForm />
            </VStack>
          </Box>
        </Flex>
      </Container>
    </Box>
  );
}
Example #3
Source File: TrackTopic.tsx    From takeout-app with MIT License 5 votes vote down vote up 
TrackTopicSpeaker: React.FC<{ speaker: Speaker }> = ({ speaker }) => {
  const socialLinks = [
    speaker.github_id
      ? {
          service: "GitHub",
          name: speaker.github_id,
          link: `https://github.com/${speaker.github_id}`,
          icon: <GitHubIcon boxSize="16px" />,
        }
      : null,
    speaker.twitter_id
      ? {
          service: "Twitter",
          name: speaker.twitter_id,
          link: `https://twitter.com/${speaker.twitter_id}`,
          icon: <TwitterIcon boxSize="16px" />,
        }
      : null,
  ].filter((v) => !!v);

  return (
    <HStack
      as="p"
      spacing={2}
      fontSize="16px"
      fontWeight="400"
      h="20px"
      lineHeight="24px"
      mt="3px"
      color={Colors.secondaryText}
    >
      <Text as="span">{speaker.name}</Text>
      {socialLinks[0] ? (
        <Link isExternal href={socialLinks[0].link} m={0}>
          <VisuallyHidden>{socialLinks[0].service} </VisuallyHidden>
          <Text as="span" mr={2}>
            @{socialLinks[0].name}
          </Text>
          {socialLinks[0].icon}
        </Link>
      ) : null}
      {socialLinks[1] ? (
        <Link isExternal href={socialLinks[1].link} m={0}>
          <VisuallyHidden>
            {socialLinks[1].service} @{socialLinks[1].name}
          </VisuallyHidden>
          {socialLinks[1].icon}
        </Link>
      ) : null}
    </HStack>
  );
}