@chakra-ui/react#Text JavaScript Examples

The following examples show how to use @chakra-ui/react#Text. 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: ouput.js    From GitMarkonics with MIT License 6 votes vote down vote up
Output = (file) => {

  // const getMarkdownText = () => {
  //   var rawMarkup = marked("_Nothing_ to show ");
  //   if (file.file) {
  //     rawMarkup = marked(file.file);
  //     // console.log("file is", file);
  //   } else {
  //     rawMarkup = marked("_Nothing_ to show ");
  //   }
  //   return { __html: rawMarkup };
  // };

  return (
    <Box flex="1" bg="white" border="1px" borderColor="gray.10" p={5}>
      <Tabs>
        <TabList>
          <Tab>Output</Tab>

          {/* <Tab>Preview</Tab> */}
        </TabList>

        <TabPanels>
          <TabPanel>
            <Text whiteSpace="pre-line">{file.file}</Text>
          </TabPanel>

          {/* <TabPanel>
            <div dangerouslySetInnerHTML={getMarkdownText()} />
          </TabPanel> */}
          
        </TabPanels>
      </Tabs>
    </Box>
  );
}
Example #2
Source File: Card.stories.js    From codeursenseine.com with MIT License 6 votes vote down vote up
Default.args = {
  children: (
    <Text>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </Text>
  ),
};
Example #3
Source File: SideCard.js    From DAOInsure with MIT License 6 votes vote down vote up
function SideCard() {
    return (
        <VStack width="15vw" borderRadius={5} borderWidth="2px" borderStyle="solid" borderColor="whatsapp.200">
            <VStack padding={5} borderBottomColor="whatsapp.200" borderBottomWidth="2px" width="100%">
                <Avatar size="lg" src="https://worker.snapshot.org/mirror?img=https%3A%2F%2Fcloudflare-ipfs.com%2Fipfs%2FQmT1Ban8im8JQm2gqYSoMGaLZTgxR8nFyrYBF7MgWvRKFh" />
                <Text fontWeight="700" fontSize="20px">Sushi</Text>
            </VStack>
            <VStack alignItems="flex-start" width="100%">
                <Box width="100%" px={5} py={2} borderRadius="2px" borderLeftWidth={false ? "4px": "0px"} borderLeftStyle="solid" borderLeftColor="whatsapp.500">
                    <Text fontWeight="600">Claims</Text>
                </Box>
                <Box py={2} width="100%" _hover={{ bg: "whatsapp.300" }} px={5}>
                    <Text fontWeight="600">New Claim</Text>
                </Box>
            </VStack>
        </VStack>
    );
}
Example #4
Source File: ApplySection.js    From interspace.chat with GNU General Public License v3.0 6 votes vote down vote up
Feature = ({ text, icon, iconBg, call }) => {
  const responsiveSize = useBreakpointValue({base: 'xs', md: 'sm'})
  return (
    <Stack direction={"row"} align={"center"}>
      <Flex
        w={8}
        h={8}
        align={"center"}
        justify={"center"}
        rounded={"full"}
        // bg={iconBg}
      >
        <Image src={icon} />
      </Flex>
      <Text fontWeight={500} fontSize={{base: '2.8vmin', md: '1.2vmax'}} flex={1}>
        {text}
      </Text>
      <Button onClick={() => call()} colorScheme="pink" bg="#FF61E6" size={responsiveSize} justifySelf="right">
        Apply
      </Button>
    </Stack>
  );
}
Example #5
Source File: Container.js    From benjamincarlson.io with MIT License 6 votes vote down vote up
Container = ({ children }) => {
  const router = useRouter()
  return (
    <>
      <Link isExternal href="https://github.com/sponsors/bjcarlson42">
        <Box bgGradient='linear(to-l, #7928CA, #FF0080)'>
          <Flex justify="center" align="center" py={1} color="white">
            <GitHubIcon />
            <Text ml={2}>Sponsor Me On GitHub!</Text>
          </Flex>
        </Box>
      </Link>
      <Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
      <Navigation />
      <Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
      <Flex
        as="main"
        justifyContent="center"
        flexDirection="column"
        bg={useColorModeValue("#ffffff", "#15161a")}
        color={useColorModeValue("#000000", "#ffffff")}
      >
        {/* hero outside main Flex to avoid px */}
        {router.pathname == '/' && <Hero />}
        <Flex px={4} flexDir="column" minH="90vh">
          {children}
        </Flex>
        <Footer />
      </Flex>
    </>
  )
}
Example #6
Source File: rent.js    From idena-web with MIT License 6 votes vote down vote up
function ProviderInfoRow({title, children, ...props}) {
  return (
    <Flex direction="column" mt={2} {...props}>
      <Text fontSize="base" fontWeight={500} color="brandGray.500">
        {title}
      </Text>
      {children}
      <Divider mt="10px" />
    </Flex>
  )
}
Example #7
Source File: Header.js    From grandcast.fm with Apache License 2.0 6 votes vote down vote up
MenuItem = ({ children, isLast, to = '/' }) => {
  return (
    <Text
      mb={{ base: isLast ? 0 : 8, sm: 0 }}
      mr={{ base: 0, sm: isLast ? 0 : 8 }}
      display="block"
    >
      <Link href={to}>{children}</Link>
    </Text>
  )
}
Example #8
Source File: MeetupSpeaker.js    From codeursenseine.com with MIT License 5 votes vote down vote up
MeetupSpeaker = ({ speaker, ...props }) => {
  const md = new Remarkable("full", {
    html: true,
  });

  // Save original method to invoke.
  var originalRender = md.renderer.rules.link_open;

  md.renderer.rules.link_open = function () {
    // Invoke original method first.
    let result = originalRender.apply(null, arguments);

    result = result.replace(
      ">",
      'target="_blank" rel="noopener noreferrer" class="remarkable-link">'
    );

    return result;
  };

  const bio = md.render(speaker.bio);

  return (
    <Stack spacing={2} {...props}>
      <Heading as="h5" size="sm" color="brand.900">
        {speaker.name}
      </Heading>
      <Stack isInline spacing={6}>
        <Image
          boxSize={{ base: "5rem", sm: "7.5rem" }}
          flex="none"
          objectFit="cover"
          src={speaker.avatar}
          alt={speaker.name}
          fallbackSrc="/default.jpg"
          borderRadius={4}
        />
        <Stack>
          <Box
            className="remarkable"
            dangerouslySetInnerHTML={{ __html: bio }}
          />
          {speaker.twitter && (
            <Text>
              Twitter :{" "}
              <A
                href={`https://twitter.com/${speaker.twitter}`}
                target="_blank"
              >
                @{speaker.twitter}
              </A>
            </Text>
          )}
        </Stack>
      </Stack>
    </Stack>
  );
}
Example #9
Source File: Stats.js    From DAOInsure with MIT License 5 votes vote down vote up
function Stats(props) {
	return (
		<VStack width='100%'>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>Treasury Funds</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					50 DAI
				</Heading>
			</VStack>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>Total Claims</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					{props.claims}
				</Heading>
			</VStack>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>DAO Members</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					{props.daoMemberCount}
				</Heading>
			</VStack>
		</VStack>
	);
}
Example #10
Source File: App.js    From interspace.chat with GNU General Public License v3.0 5 votes vote down vote up
AlphaNotice = () => {
  const [toggle, setToggle] = useState(true);
  const ref = useRef(null);
  return (
    <Box
      ref={ref}
      // display="none"
      bg="linear-gradient(90.24deg, #640DFB80 0.3%, rgba(100, 13, 251, 0.1) 80.16%)"
      backdropFilter="blur(7px)"
      boxShadow="0 0 15px rgba(0,0,0,0.6)"
      color="#FF61E6"
      position="fixed"
      bottom={0}
      left={0}
      right={0}
      width="100%"
      textAlign="center"
      height="auto"
      opacity={toggle ? 1 : 0}
      transform={`translateY(${toggle ? 0 : 100}px)`}
      transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.3s ease-in-out"
      zIndex={3000}
    >
      <Box
        d="flex"
        position="relative"
        alignItems="center"
        justifyContent="space-around"
        flexFlow="row nowrap"
        mx="auto"
        maxW={{base: '75%', md: '66%', '2xl': "6xl"}}
        px={{base: 5, lg: 3}}
        py={3}
      >
        {/* <Image src={BabyOctoGif} boxSize="25px" objectFit="cover" /> */}
        <Text fontSize={{base: "2vmin", lg: '0.7vmax'}} fontWeight={700}>
          The site is in{" "}
          <Text as="span" color="#76EBF2" fontWeight="700">
            Alpha
          </Text>
          .{" "}
          <span role="img" aria-label="watchful eyes">
            ?
          </span>{" "}
          We're still working on content, there's no Web3 connectivity and there
          are some bugs. <br /> We're working to get it
          all ship shape for June!
        </Text>
        {/* <Image src={BabyOctoGif} boxSize="35px" objectFit="cover" /> */}
        <IconButton
          onClick={() => setToggle(!toggle)}
          colorScheme="ghost"
          color="#927CFF"
          pos="fixed"
          bottom={3}
          right={{base: 2, lg: 6}}
          size="sm"
          aria-label="Close easter egg"
          icon={<CloseIcon />}
          zIndex={2001}
        />
      </Box>
    </Box>
  );
}
Example #11
Source File: GitHubSponsorCard.js    From benjamincarlson.io with MIT License 5 votes vote down vote up
GitHubSponsorCard = () => {
    const { colorMode } = useColorMode()

    const colorSecondary = {
        light: 'gray.600',
        dark: 'gray.400'
    }
    return (
        <Box
            w="100%"
            p={5}
            my={4}
            border='1px solid'
            borderColor="lightgray"
            borderRadius={5}
            h="100%"
        >
            <Flex>
                <Image w="75px" h="75px" borderRadius={5} src="/images/portrait.jpeg"></Image>
                <Flex flexDirection={['column', 'row']}>
                    <Flex
                        width="100%"
                        align="flex-start"
                        justifyContent="space-between"
                        flexDirection="column"
                        mx={2}
                    >
                        <Heading as="h3" size="md">
                            Sponsor Benjamin Carlson on GitHub Sponsors
                        </Heading>
                        <Text color={colorSecondary[colorMode]}>
                            Hi ? I'm Benjamin Carlson, a senior college student studying computer science. I post weekly tutorial videos on my YouTube channel and build cool open source projects!
                        </Text>
                    </Flex>
                    <Flex mt={[2, 0, 0]}>
                        <iframe src="https://github.com/sponsors/bjcarlson42/button" title="Sponsor bjcarlson42" height="35" width="116" style={{ border: '0' }}></iframe>
                    </Flex>
                </Flex>
            </Flex>
        </Box>
    )
}
Example #12
Source File: CartMenu.js    From react-sample-projects with MIT License 5 votes vote down vote up
CartMenu = () => {
  const cartItems = useSelector(state => state.cart.cartItems) || [];
  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <Menu>
      <VStack position="relative">
        {cartItems.length > 0 && (
          <Box
            position="absolute"
            borderRadius="50%"
            right={-1}
            top={-1}
            p={1}
            zIndex={1}
            bg="red"
            color="white"
            fontSize="10"
          >
            {totalItems}
          </Box>
        )}
        <MenuButton
          as={IconButton}
          variant="ghost"
          size="md"
          fontSize="lg"
          icon={<MdShoppingCart />}
        ></MenuButton>
      </VStack>
      <MenuList p={2}>
        {cartItems.map(item => (
          <Link key={item.id} to={`/product/${item.id}`}>
            <MenuItem>
              <HStack>
                <Image
                  boxSize="2rem"
                  borderRadius="full"
                  src={item.image}
                  alt={item.title}
                  mr="12px"
                />
                <span>{item.title}</span>
              </HStack>
            </MenuItem>
          </Link>
        ))}
        {cartItems.length > 0 && (
          <MenuItem>
            <Box my={2} width="100%">
              <Link to="/cart">
                <Button isFullWidth colorScheme="teal">
                  Go To Cart
                </Button>
              </Link>
            </Box>
          </MenuItem>
        )}
        {cartItems.length === 0 && (
          <Box my={2} width="100%">
            <Text fontSize="xl">Your cart is empty :(</Text>
          </Box>
        )}
      </MenuList>
    </Menu>
  );
}
Example #13
Source File: 404.js    From idena-web with MIT License 5 votes vote down vote up
export default function Custom404() {
  const router = useRouter()
  const {t} = useTranslation()
  return (
    <Flex h="100vh" direction="column">
      <Flex flexGrow={1} align="center" justify="center" direction="column">
        <Stack spacing="60px">
          <Image ignoreFallback src="/static/idena-logo-circle.svg" h={16} />
          <Image ignoreFallback src="/static/404.jpg" h="180px" />
          <Flex
            fontSize="lg"
            color="gray.500"
            fontWeight="500"
            align="center"
            direction="column"
          >
            <Text>{t('The screen you were looking for doesn’t exist.')}</Text>
            <Text>{t('Return to homepage or explore')}</Text>
          </Flex>
        </Stack>

        <PrimaryButton mt={7} onClick={() => router.push('/home')}>
          {t('Back to My Idena')}
        </PrimaryButton>
      </Flex>
      <Flex justify="center" mb="45px">
        <Trans i18nKey="notFoundContactUs" t={t}>
          <Text color="muted" fontSize="md">
            If you have troubles, please{' '}
            <Link href="mailto:[email protected]" color="blue.500">
              contact us
            </Link>
          </Text>
        </Trans>
      </Flex>
    </Flex>
  )
}