@chakra-ui/react#LinkOverlay JavaScript Examples

The following examples show how to use @chakra-ui/react#LinkOverlay. 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: containers.js    From idena-web with MIT License 6 votes vote down vote up
function AdBannerContent({ad}) {
  return (
    <LinkBox as={HStack} spacing={2}>
      <AdImage src={ad?.thumb} w={10} />
      <Stack spacing="0.5" fontWeight={500} maxW={['2xs', 'lg']}>
        <LinkOverlay href={ad?.url} target="_blank">
          <Text lineHeight={4} isTruncated>
            {ad?.title}
          </Text>
        </LinkOverlay>
        <Text fontSize="sm" color="muted" lineHeight={4} isTruncated>
          {ad?.desc}
        </Text>
      </Stack>
    </LinkBox>
  )
}
Example #2
Source File: SourceCode.js    From blobs.app with MIT License 5 votes vote down vote up
SourceCode = () => {
  const links = [
    {
      name: 'blobs.app',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/blobs.app',
      desc: "Blobs application's source",
    },
    {
      name: 'Blob generator',
      desc: 'Create fixed blob shape using seed',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/blobshape',
    },
    {
      name: 'Flutter blobs',
      desc: 'Generate blobs for Flutter apps',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/flutter_blobs',
    },
    {
      name: 'blobshape',
      desc: 'Node package of blob generator',
      icon: NpmIcon,
      link: 'https://www.npmjs.com/package/blobshape',
    },
    {
      name: 'blobs',
      desc: 'Dart package for blob generator',
      icon: FlutterIcon,
      link: 'https://pub.dev/packages/blobs',
    },
  ];
  return (
    <Box>
      {links.map((link, index) => (
        <>
          <Box
            py="3"
            px="2"
            rounded="lg"
            _hover={{
              transform: 'scale(1.05)',
              transition: 'all 0.5s ease',
              bg: 'rgba(0,0,0,0.1)',
            }}
          >
            <LinkBox as="article">
              <Flex alignItems="center">
                <Box>
                  <link.icon fontSize="25px" color="gray.500" mr="5" />
                </Box>
                <Box flex="1" pr="2">
                  <LinkOverlay href={link.link} isExternal>
                    <Heading color="primary" fontSize="md">
                      {link.name}
                    </Heading>
                  </LinkOverlay>
                  <Text fontSize="sm">{link.desc}</Text>
                </Box>
                <Box>
                  <RightArrowIcon fontSize="20px" color="gray.400" />
                </Box>
              </Flex>
            </LinkBox>
          </Box>
          {index !== 4 && <Divider borderStyle="dashed" />}
        </>
      ))}
    </Box>
  );
}
Example #3
Source File: SavedBlobs.js    From blobs.app with MIT License 5 votes vote down vote up
SavedBlobs = ({ savedBlobs = [], deleteBlob, loadBlobs }) => {
  const cardHoverBg = useColorModeValue('gray.100', 'gray.700');
  useEffect(() => {
    if (!savedBlobs) loadBlobs();
  }, [savedBlobs]);
  return (
    <Box>
      {savedBlobs?.length === 0 && (
        <Box textAlign="center">
          <Text my="20" fontSize="2xl">
            No saved blobs found!
          </Text>
        </Box>
      )}
      <SimpleGrid
        columns={{ sm: 2, md: 4 }}
        spacing="40px"
        mb="20"
        justifyContent="center"
      >
        {savedBlobs?.map((blob) => (
          <LinkBox
            // h="200"
            rounded="2xl"
            p="5"
            borderWidth="1px"
            _hover={{ boxShadow: '2xl', background: cardHoverBg }}
            role="group"
          >
            <Text
              fontSize="sm"
              display="flex"
              alignItems="center"
              justifyContent="space-between"
            >
              <LinkOverlay
                style={{ textTransform: 'uppercase', fontWeight: 600 }}
                href={blob.url}
              >
                {blob.name}
              </LinkOverlay>
              <Button
                variant="unstyled"
                visibility="hidden"
                h="auto"
                _groupHover={{ visibility: 'visible' }}
                onClick={() => {
                  deleteBlob(blob.id);
                }}
              >
                <TrashIcon color="tomato" />
              </Button>
            </Text>
            <Divider mt="4" />

            <Blob {...blob} />
          </LinkBox>
        ))}
      </SimpleGrid>
    </Box>
  );
}
Example #4
Source File: containers.js    From idena-web with MIT License 4 votes vote down vote up
function AdPromotion({cid, title, desc, url, media, author}) {
  const {t, i18n} = useTranslation()

  const {data: burntCoins} = useBurntCoins()

  const orderedBurntCoins =
    burntCoins
      ?.sort((a, b) => b.amount - a.amount)
      .map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []

  const maybeBurn = orderedBurntCoins.find(burn => burn.cid === cid)

  const formatDna = useFormatDna()

  return (
    <Stack
      spacing="10"
      bg="white"
      rounded="lg"
      px={10}
      pt={37}
      pb={44}
      w={400}
      h={660}
    >
      <Stack spacing="4">
        <Stack spacing="2">
          <Skeleton
            isLoaded={Boolean(title)}
            minH={5}
            w={title ? 'full' : 3 / 4}
          >
            <Heading
              as="h4"
              fontWeight="semibold"
              fontSize="md"
              lineHeight="5"
              isTruncated
            >
              {title}
            </Heading>
          </Skeleton>

          <Stack spacing="1.5" minH={62}>
            <Skeleton isLoaded={Boolean(desc)} minH={5}>
              <Text color="muted" fontSize="md" lineHeight="5">
                {desc}
              </Text>
            </Skeleton>
            <Skeleton isLoaded={Boolean(url)} w={1 / 4} h={4}>
              <ExternalLink
                href={url}
                fontWeight="semibold"
                display="flex"
                maxW="80"
                textProps={{h: '4', lineHeight: '4'}}
              >
                {url}
              </ExternalLink>
            </Skeleton>
          </Stack>
        </Stack>

        <LinkBox>
          <LinkOverlay href={url} isExternal>
            <AdImage src={media} w={320} />
          </LinkOverlay>
        </LinkBox>
      </Stack>
      <Stack spacing="6">
        <HStack spacing="10">
          <Stat>
            <AdStatLabel color="gray.500" fontWeight={500} lineHeight={4}>
              {t('Sponsored by')}
            </AdStatLabel>
            <AdStatNumber color="muted" fontSize="sm" mt="1.5" h="4">
              <HStack spacing="1" align="center">
                <Avatar address={author} boxSize={4} />
                <Text as="span" maxW="36" isTruncated>
                  {author}
                </Text>
              </HStack>
            </AdStatNumber>
          </Stat>
          <Stat>
            <AdStatLabel color="gray.500" fontWeight={500} lineHeight={4}>
              {t('Burnt, {{time}}', {
                time: new Intl.RelativeTimeFormat(i18n.language, {
                  style: 'short',
                }).format(24, 'hour'),
              })}
            </AdStatLabel>
            <AdStatNumber color="muted" fontSize="sm" mt="1.5" h="4">
              {formatDna(maybeBurn?.amount ?? 0)}
            </AdStatNumber>
          </Stat>
        </HStack>
        <SuccessAlert
          icon={<InfoIcon color="green.500" boxSize={5} mr={3} />}
          fontSize="md"
        >
          {t('Watching ads makes your coin valuable!')}
        </SuccessAlert>
      </Stack>
    </Stack>
  )
}
Example #5
Source File: components.js    From idena-web with MIT License 4 votes vote down vote up
export function AdCarousel() {
  const {t} = useTranslation()

  const {lng} = useLanguage()

  const {ads, currentIndex, setCurrentIndex, prev, next} = useRotateAds()

  const currentAd = ads[currentIndex]

  const {data: burntCoins} = useBurntCoins()

  const orderedBurntCoins =
    burntCoins
      ?.sort((a, b) => b.amount - a.amount)
      .map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []

  const maybeBurn = orderedBurntCoins.find(burn => burn.cid === currentAd?.cid)

  const formatDna = useFormatDna()

  const swipeProps = useSwipeable({
    onSwipedLeft: next,
    onSwipedRight: prev,
    preventDefaultTouchmoveEvent: true,
    trackMouse: true,
  })

  return (
    <Stack>
      <Box
        bg="white"
        borderRadius="lg"
        boxShadow="0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)"
        pt="6"
        px="28px"
        pb="4"
        {...swipeProps}
      >
        <Heading as="h3" fontSize="lg" fontWeight={500} isTruncated>
          {currentAd?.title}
        </Heading>
        <Text color="muted" fontSize="mdx" mt="2">
          {currentAd?.desc}
        </Text>
        <Box mt="3">
          <ExternalLink
            href={currentAd?.url}
            fontSize="base"
            fontWeight={500}
            justifyContent="start"
            maxW="64"
          >
            {currentAd?.url}
          </ExternalLink>
        </Box>
        <LinkBox mt="5">
          <LinkOverlay href={currentAd?.url} isExternal>
            <AdImage src={currentAd?.media} w="full" />
          </LinkOverlay>
        </LinkBox>
        <Stack spacing="1" mt="4" fontSize="base" divider={<HDivider />}>
          <Stack spacing="1" pt="2" pb="2.5">
            <Text fontWeight={500}>{t('Sponsored by')}</Text>
            <HStack spacing="1" align="center">
              <Avatar
                address={currentAd?.author}
                boxSize="6"
                borderRadius="lg"
              />
              <Text as="span" color="muted" isTruncated lineHeight="22px">
                {currentAd?.author}
              </Text>
            </HStack>
          </Stack>
          <Stack spacing="1" pt="2" pb="2.5">
            <Text fontWeight={500}>
              {t('Burnt, {{time}}', {
                time: new Intl.RelativeTimeFormat(lng, {
                  style: 'short',
                }).format(24, 'hour'),
              })}
            </Text>
            <Text color="muted">{formatDna(maybeBurn?.amount ?? 0)}</Text>
          </Stack>
        </Stack>
      </Box>
      <Center as={HStack} spacing="0.5" h="6">
        {ads.map((_, idx) => (
          <Box
            w="6"
            h="0.5"
            bg={idx === currentIndex ? 'gray.500' : 'gray.030'}
            borderRadius={1}
            onClick={() => {
              setCurrentIndex(idx)
            }}
          />
        ))}
      </Center>
      <Box>
        <SuccessAlert
          icon={<InfoIcon color="green.500" boxSize={5} mr={3} />}
          fontSize="md"
        >
          {t('Watching ads makes your coin valuable!')}
        </SuccessAlert>
      </Box>
    </Stack>
  )
}
Example #6
Source File: Account.jsx    From scaffold-directory with MIT License 4 votes vote down vote up
/*
  ~ What it does? ~

  Displays an Address, Balance, and Wallet as one Account component,
  also allows users to log in to existing accounts and log out

  ~ How can I use? ~

  <Account
    address={address}
    localProvider={localProvider}
    userProvider={userProvider}
    mainnetProvider={mainnetProvider}
    price={price}
    web3Modal={web3Modal}
    loadWeb3Modal={loadWeb3Modal}
    logoutOfWeb3Modal={logoutOfWeb3Modal}
    blockExplorer={blockExplorer}
  />

  ~ Features ~

  - Provide address={address} and get balance corresponding to the given address
  - Provide localProvider={localProvider} to access balance on local network
  - Provide userProvider={userProvider} to display a wallet
  - Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name
              (ex. "0xa870" => "user.eth")
  - Provide price={price} of ether and get your balance converted to dollars
  - Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal}
              to be able to log in/log out to/from existing accounts
  - Provide blockExplorer={blockExplorer}, click on address and get the link
              (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
*/

export default function Account({
  address,
  connectText,
  ensProvider,
  isWalletConnected,
  loadWeb3Modal,
  logoutOfWeb3Modal,
  setUserRole,
  userProvider,
  userRole,
}) {
  const ens = useDisplayAddress(ensProvider, address);
  const shortAddress = ellipsizedAddress(address);
  const toast = useToast({ position: "top", isClosable: true });
  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
  const registerButtonRef = useRef();
  const openPopover = () => setIsPopoverOpen(true);
  const closePopover = () => setIsPopoverOpen(false);
  const { primaryFontColor, secondaryFontColor, dividerColor } = useCustomColorModes();

  if (!userRole && isWalletConnected) {
    return <Spinner />;
  }

  const hasEns = ens !== shortAddress;
  const isAdmin = userRole === USER_ROLES.admin;
  const isBuilder = userRole === USER_ROLES.builder;
  const isAnonymous = userRole === USER_ROLES.anonymous;

  const connectWallet = (
    <Button colorScheme="blue" key="loginbutton" onClick={loadWeb3Modal}>
      {connectText || "connect"}
    </Button>
  );

  const UserDisplayName = ({ mb, textAlign }) =>
    hasEns ? (
      <>
        <Text fontSize="md" fontWeight="bold" textAlign={textAlign} color={primaryFontColor}>
          {ens}
        </Text>
        <Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign={textAlign} mb={mb}>
          {shortAddress}
        </Text>
      </>
    ) : (
      <Text fontSize="md" fontWeight="semibold" textAlign={textAlign} color={primaryFontColor} mb={mb}>
        {shortAddress}
      </Text>
    );

  const accountMenu = address && (
    <LinkBox>
      <Flex align="center">
        <LinkOverlay as={NavLink} to="/portfolio">
          <QRPunkBlockie withQr={false} address={address.toLowerCase()} w={9} borderRadius={6} />
        </LinkOverlay>
        <Box ml={4}>
          {/* ToDo. Move to Utils */}
          <UserDisplayName textAlign="left" />
        </Box>
        <Tooltip label="Disconnect wallet">
          <Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
            X
          </Button>
        </Tooltip>
      </Flex>
    </LinkBox>
  );

  const handleSignUpSuccess = () => {
    closePopover();
    toast({
      title: "You are now registered!",
      description: (
        <>
          Visit{" "}
          <Link href="/portfolio" textDecoration="underline">
            your portfolio
          </Link>{" "}
          to start building
        </>
      ),
      status: "success",
    });
  };

  const anonymousMenu = address && (
    <Popover placement="bottom-end" initialFocusRef={registerButtonRef} isOpen={isPopoverOpen} onClose={closePopover}>
      <PopoverTrigger>
        <Button variant="ghost" _hover={{ backgroundColor: "gray.50" }} w={9} p={0} onClick={openPopover}>
          <Box>
            <Icon as={HeroIconUser} w={6} h={6} color={secondaryFontColor} />
            <AvatarBadge boxSize={2} bg="red.500" borderRadius="full" top="4px" right="4px" />
          </Box>
        </Button>
      </PopoverTrigger>
      <Tooltip label="Disconnect wallet">
        <Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
          X
        </Button>
      </Tooltip>
      <PopoverContent w={72}>
        <PopoverBody
          as={Flex}
          direction="column"
          px={9}
          py={10}
          _focus={{ background: "none" }}
          _active={{ background: "none" }}
        >
          <Text color={primaryFontColor} fontWeight="bold" textAlign="center" mb={1}>
            Register as a builder
          </Text>
          <Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign="center" mb={6}>
            Sign a message with your wallet to create a builder profile.
          </Text>
          <Box m="auto" p="px" borderWidth="1px" borderColor={dividerColor} borderRadius={8}>
            <QRPunkBlockie address={address} w={19} borderRadius={6} />
          </Box>
          <UserDisplayName textAlign="center" mb={6} />
          <SignatureSignUp
            ref={registerButtonRef}
            userProvider={userProvider}
            address={address}
            onSuccess={handleSignUpSuccess}
            setUserRole={setUserRole}
          />
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );

  const userMenu = isAnonymous ? anonymousMenu : accountMenu;

  return (
    <Flex align="center">
      {isAdmin && (
        <Badge colorScheme="red" mr={4}>
          admin
        </Badge>
      )}
      {isBuilder && (
        <Badge colorScheme="green" mr={4}>
          builder
        </Badge>
      )}
      {isWalletConnected ? userMenu : connectWallet}
    </Flex>
  );
}