@chakra-ui/react#Link JavaScript Examples

The following examples show how to use @chakra-ui/react#Link. 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: affiliate.js    From idena-web with MIT License 6 votes vote down vote up
function SimpleLink({href, children, ...props}) {
  const isDesktop = useIsDesktop()
  const ComponentLink = isDesktop ? ExternalLink : Link

  return (
    <ComponentLink color="brandBlue.500" href={href} target="_blank" {...props}>
      {children}
    </ComponentLink>
  )
}
Example #2
Source File: GearList.js    From benjamincarlson.io with MIT License 6 votes vote down vote up
Gear = ({ gear }) => {
    const { colorMode } = useColorMode()

    const color = {
        light: 'black',
        dark: 'white'
    }

    const colorSecondary = {
        light: 'gray.600',
        dark: 'gray.400'
    }
    return (
        <div>
            <Text mb={1}><b>{gear.item}:</b> <Link color={colorSecondary[colorMode]} href={gear.url} isExternal>{gear.title}</Link></Text>
        </div>
    )
}
Example #3
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up
export function ProviderOfflineAlert({url, provider}) {
  const {t} = useTranslation()
  return (
    <ErrorAlert>
      <Flex direction="column" fontSize="mdx">
        <Flex>
          <Flex>
            {t('The node is unavailable:', {
              nsSeparator: '|',
            })}
          </Flex>
          <Flex ml={1}>{url}</Flex>
        </Flex>
        <Flex>
          <Flex>
            {t('Please contact the node owner:', {
              nsSeparator: '|',
            })}
          </Flex>
          <Link href={`https://t.me/${provider}`} target="_blank" ml={1}>
            {provider}
            {' >'}
          </Link>
        </Flex>
      </Flex>
    </ErrorAlert>
  )
}
Example #4
Source File: Links.jsx    From bottle-radio with MIT License 6 votes vote down vote up
Links = () => (
  <Stack>
    {links.map((link) => (
      <Link href={link.href} key={link.display} isExternal>
        <Button colorScheme="teal">{link.display}</Button>
      </Link>
    ))}
  </Stack>
)
Example #5
Source File: auth.js    From idena-web with MIT License 6 votes vote down vote up
function DnaAppUrl({url, onOpenInApp}) {
  const {t} = useTranslation()
  return (
    <HStack align="center" spacing={3} color="white" px={2} py={1.5} mb={6}>
      <LaptopIcon name="laptop" boxSize={5} />
      <Link href={url} onClick={onOpenInApp}>
        {t('Open in Idena app')}
      </Link>
    </HStack>
  )
}
Example #6
Source File: StatBox.js    From benjamincarlson.io with MIT License 6 votes vote down vote up
export default function StatBox({ title, desc, url }) {
    const { colorMode } = useColorMode()
    const borderColor = {
        light: '#CBD5E0',
        dark: '#4A5568',
    }
    const [opacity, setOpacity] = useState(0)
    
    return (
        <Link
            href={url}
            isExternal
            _hover={{
                textDecoration: 'none'
            }}
            onMouseOver={() => setOpacity(1)}
            onMouseLeave={() => setOpacity(0)}
        >
            <Box p={2} pb={[2, 1, 1]}>
                <StatGroup border={`1px solid ${borderColor[colorMode]}`} borderRadius={5} p={2} w="100%">
                    <Stat>
                        <Flex
                            align="center"
                            justifyContent="space-between"
                        >
                            <StatLabel>{desc}</StatLabel>
                            <ExternalLinkIcon opacity={opacity} />
                        </Flex>
                        <StatNumber>{title}</StatNumber>
                    </Stat>
                </StatGroup>
            </Box>
        </Link>
    )
}
Example #7
Source File: Credits.js    From blobs.app with MIT License 6 votes vote down vote up
Credits = () => (
  <Box>
    <Text textAlign="center" variant="subtle">
      Sound effects obtained from{' '}
      <Link color="primary" to="https://www.zapsplat.com">
        https://www.zapsplat.com
      </Link>
    </Text>
  </Box>
)
Example #8
Source File: ChallengeCard.jsx    From scaffold-directory with MIT License 6 votes vote down vote up
ChallengeCard = ({ challengeId, challengeInfo, submissionInfo }) => (
  <HStack spacing="6px" style={{ opacity: challengeInfo.disabled ? 0.5 : 1 }}>
    {challengeInfo.disabled ? (
      <p>{challengeInfo.label}</p>
    ) : (
      <Link as={RouteLink} to={`/challenge/${challengeId}`} color="teal.500">
        {challengeInfo.label}
      </Link>
    )}
    {submissionInfo && <p> [{submissionInfo.status}]</p>}
    {challengeInfo.disabled && <p> (disabled)</p>}
  </HStack>
)
Example #9
Source File: Mdx.js    From codeursenseine.com with MIT License 6 votes vote down vote up
A = (props) => (
  <Link
    textDecoration="underline"
    color="brand.600"
    _hover={{ textDecoration: "none" }}
    _focus={{ textDecoration: "none" }}
    {...props}
  />
)
Example #10
Source File: chakraMarkdownTheme.jsx    From scaffold-directory with MIT License 6 votes vote down vote up
chakraMarkdownComponents = {
  a: ({ href, children }) => (
    <Link href={href} color="blue.500">
      {children}
    </Link>
  ),
  blockquote: props => <MdBlockQuote {...props} />,
  code: props => <MdCode {...props} />,
  h1: props => <MdH1 {...props} />,
  h2: ({ children }) => (
    <Heading as="h2" size="lg" mt={6} mb={4}>
      {children}
    </Heading>
  ),
  h3: ({ children }) => (
    <Heading as="h3" size="md" mt={6} mb={4}>
      {children}
    </Heading>
  ),
  hr: () => <Divider my={6} borderBottomWidth="4px" />,
  img: props => <Image {...props} mb={4} />,
  pre: props => <MdPre {...props} />,
  p: props => <MdP {...props} />,
  ul: ({ children }) => <UnorderedList mb={4}>{children}</UnorderedList>,
}
Example #11
Source File: NavSocial.js    From codeursenseine.com with MIT License 6 votes vote down vote up
NavSocial = (props) => {
  return (
    <Stack spacing="1" textAlign="center" {...props}>
      <Link href="mailto:[email protected]" fontSize="sm">
        [email protected]
      </Link>
      <Stack isInline spacing="0" justify="center" flexWrap="wrap">
        {socialLinks.map((social) => (
          <Tooltip
            key={social.link}
            zIndex="9999"
            placement="top"
            label={social.name}
          >
            <IconButton
              as="a"
              target="_blank"
              href={social.link}
              aria-label={social.name}
              icon={social.icon}
              variant="unstyled"
              size="md"
              d="inline-flex"
            />
          </Tooltip>
        ))}
      </Stack>
    </Stack>
  );
}
Example #12
Source File: blog.js    From benjamincarlson.io with MIT License 5 votes vote down vote up
export default function Blog({ posts }) {
    const [searchValue, setSearchValue] = useState('')

    const filteredBlogPosts = posts
        .sort(
            (a, b) =>
                Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt))
        )
        .filter((frontMatter) =>
            frontMatter.data?.title?.toLowerCase()?.includes(searchValue.toLowerCase()) ||
            frontMatter.data?.summary?.toLowerCase()?.includes(searchValue.toLowerCase())
        )

    return (
        <>
            <NextSeo
                title={title}
                description={description}
                canonical={url}
                openGraph={{
                    url,
                    title,
                    description
                }}
            />
            <Container>
                <Stack
                    as="main"
                    spacing={8}
                    justifyContent="center"
                    alignItems="flex-start"
                    m="0 auto 0 auto"
                    maxWidth="1000px"
                >
                    <Flex
                        flexDirection="column"
                        justifyContent="flex-start"
                        alignItems="flex-start"
                        maxWidth="1000px"
                        px={4}
                        minH="100vh"
                    >
                        <motion.div
                            initial={{ y: -20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ duration: .7, delay: .4 }}
                        >
                            <Heading letterSpacing="tight" as="h1" size="2xl" my={4}>
                                Blog ({posts.length} posts)
                            </Heading>
                            <Text mb={2}>I now write for <Link isExternal href="https://www.coffeeclass.io/articles" color="blue.500">coffeeclass.io</Link>. Visit that site to view all my tutorials!</Text>
                            <InputGroup mb={4} mr={4} w="100%">
                                <Input
                                    aria-label="Search by post title or summary"
                                    onChange={(e) => setSearchValue(e.target.value)}
                                    placeholder="Search by post title or summary"
                                />
                                <InputRightElement>
                                    <SearchIcon color="gray.300" />
                                </InputRightElement>
                            </InputGroup>
                            {!filteredBlogPosts.length && 'No posts found.'}
                            {filteredBlogPosts.map((frontMatter, index) => (
                                <BlogPost
                                    key={frontMatter.data.title}
                                    href={posts[index].filePath.replace(/\.mdx?$/, '')}
                                    {...frontMatter.data}
                                />
                            ))}
                        </motion.div>
                    </Flex>
                </Stack>
            </Container>
        </>
    )
}
Example #13
Source File: Forget.js    From GitMarkonics with MIT License 5 votes vote down vote up
export default function Forget() {
    return (
      <>
      <Navbar />
        <div className="login">
      <div className="login__container">
        <div className="login__containerTop">
          <div className="login__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="login__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              FORGET PASSWORD
            </Heading>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input  required
                borderRadius="full"
                type="tel"
                placeholder="Email Address"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="login__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                type="tel" required
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <HStack className="login__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="loginBtn"
              >
                SUBMIT
              </Button>
              <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Remember?</a>
              </Link>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
    )
}
Example #14
Source File: projects.js    From benjamincarlson.io with MIT License 5 votes vote down vote up
Projects = () => {
    const { colorMode } = useColorMode()

    const colorSecondary = {
        light: 'gray.600',
        dark: 'gray.400'
    }

    const iconColor = {
        light: 'gray.600',
        dark: 'gray.300'
    }

    return (
        <>
            <NextSeo
                title={title}
                description={description}
                canonical={url}
                openGraph={{
                    url,
                    title,
                    description
                }}
            />
            <Container>
                <Flex
                    flexDirection="column"
                    maxWidth="1000px"
                    alignSelf={[null, "center"]}
                >
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: .4 }}
                    >
                        <Heading letterSpacing="tight" my={4} as="h1" size="2xl">
                            Projects
                        </Heading>
                        <Text color={colorSecondary[colorMode]}>Between school, work, youtube, and individual curiosity, I have worked on many projects over the years. If you enjoy or use any of these projects, please consider <Link href="https://github.com/sponsors/bjcarlson42" isExternal color="blue.500">sponsoring me</Link> on GitHub!
                        </Text>
                        <GitHubSponsorCard />
                        <ProjectListFull />
                    </motion.div>
                </Flex>
            </Container>
        </>
    )
}
Example #15
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>
  )
}
Example #16
Source File: FlutterCodeModalButton.js    From blobs.app with MIT License 5 votes vote down vote up
FlutterCodeModalButton = ({ edges, growth, seed }) => {
  const ID = `${edges}-${growth}-${seed}`;
  const code = `///import blobs library
import 'package:blobs/blobs.dart';
  
///add blob widget
Container(
  child: Blob.fromID(
    id: ['${ID}'],
    size: 400,
  ),
),
  `;
  const { hasCopied, onCopy } = useClipboard(ID);

  const Actions = () => (
    <>
      <Button
        onClick={onCopy}
        variant="heavy"
        leftIcon={<CopyIcon fontSize="lg" />}
      >
        {hasCopied ? 'Copied' : 'Copy ID'}
      </Button>
    </>
  );

  return (
    <Modal
      title="Use it in Flutter"
      src={
        <Tooltip
          label="Copy Flutter code"
          aria-label="Copy Flutter code"
          hasArrow
          variant="default"
        >
          <IconButton variant="ghost">
            <FlutterIcon w={6} h={6} color="gray.400" />
          </IconButton>
        </Tooltip>
      }
      actions={<Actions />}
    >
      <Highlight code={code} lang="dart" />
      <Text fontSize="sm">
        For more info about the package and documentation, please check the{' '}
        <Link href="https://pub.dev/packages/blobs/" isExternal color="primary">
          blobs
        </Link>{' '}
        repository.
      </Text>
    </Modal>
  );
}
Example #17
Source File: BuildReviewRow.jsx    From scaffold-directory with MIT License 5 votes vote down vote up
export default function BuildReviewRow({ build, isLoading, approveClick, rejectClick }) {
  return (
    <Tr>
      <Td>
        <Link as={RouteLink} to={`/builders/${build.address}`} pos="relative">
          <Address address={build.address} w="12.5" fontSize="16" />
        </Link>
      </Td>
      <Td>{build.name}</Td>
      <Td>{build.desc}</Td>
      <Td>
        <Link href={build.branch} color="teal.500" target="_blank" rel="noopener noreferrer">
          {build.branch}
        </Link>
      </Td>
      <Td>
        <DateWithTooltip timestamp={build.submittedTimestamp} />
      </Td>
      <Td>
        <HStack spacing={3}>
          <Button
            type="button"
            colorScheme="red"
            disabled={isLoading}
            className="danger"
            onClick={() => rejectClick(build.address, build.id)}
            size="xs"
          >
            Reject
          </Button>
          <Button
            type="button"
            colorScheme="green"
            disabled={isLoading}
            style={{ marginRight: 10 }}
            onClick={() => approveClick(build.address, build.id)}
            size="xs"
          >
            Approve
          </Button>
        </HStack>
      </Td>
    </Tr>
  );
}
Example #18
Source File: about.js    From handsign-tensorflow with BSD 2-Clause "Simplified" License 5 votes vote down vote up
export default function About() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <div>
      <Button onClick={onOpen} colorScheme="orange">
        Learn More
      </Button>

      <Modal onClose={onClose} isOpen={isOpen} isCentered>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>American Sign Language (ASL)</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text fontSize="sm">
              American Sign Language (ASL) is a visual language that serves as
              the predominant sign language of Deaf communities in the United
              States and most of Canada.<br></br>
              Here's the list of ASL hand gestures for alphabet.
            </Text>
            <Image src={handImages} />
            <Text fontSize="sm">
              This sign language illustration is created by{" "}
              <Link
                href="https://thenounproject.com/pelodrome/"
                isExternal
                color="orange.300"
              >
                Pelin Kahraman
              </Link>
            </Text>
          </ModalBody>
          <ModalFooter>
            <Button onClick={onClose}>Close</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  )
}
Example #19
Source File: SpeakerSection.js    From interspace.chat with GNU General Public License v3.0 5 votes vote down vote up
SpeakersSection = () => {
  const ref = useRef(null);
  const onScreen = useOnScreen(ref);

  return (
    <Box as="section" id="speakers">
      <Box
        ref={ref}
        className="__content"
        transform={`translate3d(${onScreen ? 0 : "70px"}, 0, 0)`}
        opacity={onScreen ? 1 : 0}
        transition="transform 0.3s 0.4s ease-in-out, opacity 0.6s 0.5s ease-in"
        width="100%"
      >
        <Text as="h2">Speakers</Text>
        <Box className="__content__body">
          <Text>
            Novas tentacles, have we got some fantastic guests lined up!!{" "}
            <span role="img" aria-label="Screaming with excitement">
              ?
            </span>
          </Text>
          <Flex alignItems="flex-start" justifyContent="space-between">
            <Box flex="0 0 48%" w="48%">
              <Text as="h3" className="gradient2">
                Metaverse Week
              </Text>
              <Text>Want to take part in Metaverse Week?</Text>
              <Text>
                Find the application forms on the{" "}
                <Link href="#schedule">Schedule page</Link>
              </Text>
            </Box>
            <Box flex="0 0 48%" w="48%">
              <Text as="h3" className="gradient2">
                DAO Week
              </Text>
              <Text>Want to take part in DAO Week?</Text>
              <Text>
                Find the application forms on the{" "}
                <Link href="#schedule">Schedule page</Link>
              </Text>
            </Box>
          </Flex>
        </Box>
      </Box>
    </Box>
  );
}
Example #20
Source File: Login.js    From GitMarkonics with MIT License 5 votes vote down vote up
function Login() {
  return (
    <>
    <Navbar />
    <div className="login">
      <div className="login__container">
        <div className="login__containerTop">
          <div className="login__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="login__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              USER LOGIN
            </Heading>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Username"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="login__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/register" >Need Account ?</a>
              </Link>
            <HStack className="login__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="loginBtn"
              >
                LOGIN
              </Button>
              <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/forget" >Forgot password?</a>
              </Link>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
  );
}
Example #21
Source File: Footer.js    From interspace.chat with GNU General Public License v3.0 5 votes vote down vote up
// import MetaGameLogo from '../static/assets/img/logo.png'

export function SiteFooter() {
  const ref = useRef(null);
  const onScreen = useOnScreen(ref);

  return (
      <Box
        ref={ref}
        as="footer"
        bg="transparent"
        position="absolute"
        bottom={0}
        left={0}
        px={4}
        w="100vw"
        h={{base: 'auto'}}
        // transform={{md: `translate3d(0, ${onScreen ? 0 : "70px"}, 0)`}}
        opacity={onScreen ? 1 : 0}
        transition="transform 0.3s 0.4s ease-in-out, opacity 0.6s 0.3s ease-in"
        zIndex={0}
        sx={{
          a: {
            color: "white",
          },
        }}
      >
        <Image
          src={OctopusImg}
          boxSize={{base: '90px', md: "150px"}}
          position="absolute"
          bottom={0}
          left={{base: "calc(50% - 45px)", md: "calc(50% - 75px)"}}
        />
        <Flex h={"100px"} alignItems={"center"} justifyContent={"center"}>
          <Box className="gradient2">
            <Text textShadow="none" ><span role="img" aria-label="Octopus mascot">?</span> &copy; 2022 MetaFam <span role="img" aria-label="Octopus mascot">?</span> <Link href="https://metagame.wtf" isExternal>metagame.wtf</Link> <span role="img" aria-label="Octopus mascot">?</span></Text>
          </Box>
        </Flex>
      </Box>
  );
}
Example #22
Source File: ProjectCard.js    From benjamincarlson.io with MIT License 5 votes vote down vote up
export default function ProjectCard({ title, description, repoHref, demoHref, languageColor, language, youtubeId, starCount, stargazersUrl, homepage }) {
    const [opacity, setOpacity] = useState(0)
    const [lineColor, setLineColor] = useState("blue.500")
    const { colorMode } = useColorMode()

    const colorSecondary = {
        light: 'gray.600',
        dark: 'gray.400'
    }

    const boxShadowColor = {
        light: '0px 8px 26px rgba(0, 0, 0, 0.2)',
        dark: '0px 8px 26px rgba(0, 0, 0, 0.7)'
    }
    return (
        <Flex
            flexDir="column"
            _hover={{ transform: 'scale(1.05)', border: `2px solid ${languageColor}` }}
            transition="transform .5s ease-in-out, border .5s ease-in-out"
            boxShadow={boxShadowColor[colorMode]}
            borderRadius={5}
            border="2px solid transparent"
            onMouseOver={() => { setOpacity(1), setLineColor(languageColor) }}
            onMouseLeave={() => { setOpacity(0), setLineColor("blue.500") }}
        >
            <Flex p={[5, 15, 25]} flexDir="column" justify="space-between" h="100%">
                <Box>
                    <Heading as="h3" size="lg" fontWeight="semibold" mb={2}>{title}</Heading>
                    <Box h={1} w="35%" bgColor={lineColor} transition="background-color .5s ease-in-out" mb={4} />
                    <Text color={colorSecondary[colorMode]}>{description}</Text>
                </Box>
                <Flex justify="space-between" mt={2}>
                    <Flex align="center">

                        {stargazersUrl && (
                            <Link href={stargazersUrl.replace("api.", "").replace("repos/", "")} _hover={{ textDecor: 'none' }} isExternal>
                                <Flex opacity={opacity} transition="opacity .5s ease-in-out">
                                    <Button colorScheme="yellow" leftIcon={<AiOutlineStar />} variant="ghost">{starCount}</Button>
                                </Flex>
                            </Link>
                        )}

                        {homepage && (
                            <Link href={homepage} isExternal>
                                <IconButton icon={homepage.includes("youtu.be") ? <YoutubeIcon /> : <ExternalLinkIcon />} variant="ghost" opacity={opacity} transition="opacity .5s ease-in-out" />
                            </Link>
                        )}

                        {repoHref && (
                            <Link href={repoHref} isExternal>
                                <IconButton icon={<GitHubIcon />} variant="ghost" opacity={opacity} transition="opacity .5s ease-in-out" />
                            </Link>
                        )}
                        {demoHref && (
                            <Link href={demoHref} isExternal>
                                <IconButton icon={<ExternalLinkIcon />} variant="ghost" opacity={opacity} transition="opacity .5s ease-in-out" />
                            </Link>
                        )}
                        {youtubeId && (
                            <Link href={youtubeId} isExternal>
                                <IconButton icon={<YoutubeIcon />} variant="ghost" opacity={opacity} transition="opacity .5s ease-in-out" />
                            </Link>
                        )}
                    </Flex>
                    <Flex align="center">
                        <Box w={3} h={3} mr={1} borderRadius="50%" bgColor={languageColor} />
                        <Text fontSize="sm" color={colorSecondary[colorMode]}>{language}</Text>
                    </Flex>
                </Flex>
            </Flex>
        </Flex>
    )
}
Example #23
Source File: SubmissionReviewView.jsx    From scaffold-directory with MIT License 4 votes vote down vote up
export default function SubmissionReviewView({ userProvider }) {
  const address = useUserAddress(userProvider);
  const [challenges, setChallenges] = React.useState([]);
  const [isLoadingChallenges, setIsLoadingChallenges] = React.useState(true);
  const [draftBuilds, setDraftBuilds] = React.useState([]);
  const [isLoadingDraftBuilds, setIsLoadingDraftBuilds] = React.useState(true);
  const toast = useToast({ position: "top", isClosable: true });
  const toastVariant = useColorModeValue("subtle", "solid");
  const { secondaryFontColor } = useCustomColorModes();

  const fetchSubmittedChallenges = useCallback(async () => {
    setIsLoadingChallenges(true);
    let fetchedChallenges;
    try {
      fetchedChallenges = await getSubmittedChallenges(address);
    } catch (error) {
      toast({
        description: "There was an error getting the submitted challenges. Please try again",
        status: "error",
        variant: toastVariant,
      });
      setIsLoadingChallenges(false);
      return;
    }
    setChallenges(fetchedChallenges.sort(bySubmittedTimestamp));
    setIsLoadingChallenges(false);
  }, [address, toastVariant, toast]);

  const fetchSubmittedBuilds = useCallback(async () => {
    setIsLoadingDraftBuilds(true);
    let fetchedDraftBuilds;
    try {
      fetchedDraftBuilds = await getDraftBuilds(address);
    } catch (error) {
      toast({
        description: "There was an error getting the draft builds. Please try again",
        status: "error",
        variant: toastVariant,
      });
      setIsLoadingDraftBuilds(false);
      return;
    }
    setDraftBuilds(fetchedDraftBuilds.sort(bySubmittedTimestamp));
    setIsLoadingDraftBuilds(false);
  }, [address, toastVariant, toast]);

  useEffect(() => {
    if (!address) {
      return;
    }
    fetchSubmittedChallenges();
    // eslint-disable-next-line
  }, [address]);

  useEffect(() => {
    if (!address) {
      return;
    }
    fetchSubmittedBuilds();
    // eslint-disable-next-line
  }, [address]);

  const handleSendChallengeReview = reviewType => async (userAddress, challengeId, comment) => {
    let signMessage;
    try {
      signMessage = await getChallengeReviewSignMessage(address, userAddress, challengeId, reviewType);
    } catch (error) {
      toast({
        description: " Sorry, the server is overloaded. ???",
        status: "error",
        variant: toastVariant,
      });
      return;
    }

    let signature;
    try {
      signature = await userProvider.send("personal_sign", [signMessage, address]);
    } catch (error) {
      toast({
        description: "Couldn't get a signature from the Wallet",
        status: "error",
        variant: toastVariant,
      });
      console.error(error);
      return;
    }

    try {
      await patchChallengeReview(address, signature, { userAddress, challengeId, newStatus: reviewType, comment });
    } catch (error) {
      if (error.status === 401) {
        toast({
          status: "error",
          description: "Submission Error. You don't have the required role.",
          variant: toastVariant,
        });
        return;
      }
      toast({
        status: "error",
        description: "Submission Error. Please try again.",
        variant: toastVariant,
      });
      return;
    }
    toast({
      description: "Review submitted successfully",
      status: "success",
      variant: toastVariant,
    });
    fetchSubmittedChallenges();
  };

  const handleSendBuildReview = reviewType => async (userAddress, buildId) => {
    let signMessage;
    try {
      signMessage = await getBuildReviewSignMessage(address, buildId, reviewType);
    } catch (error) {
      toast({
        description: " Sorry, the server is overloaded. ???",
        status: "error",
        variant: toastVariant,
      });
      return;
    }

    let signature;
    try {
      signature = await userProvider.send("personal_sign", [signMessage, address]);
    } catch (error) {
      toast({
        description: "Couldn't get a signature from the Wallet",
        status: "error",
        variant: toastVariant,
      });
      return;
    }

    try {
      await patchBuildReview(address, signature, { userAddress, buildId, newStatus: reviewType });
    } catch (error) {
      if (error.status === 401) {
        toast({
          status: "error",
          description: "Submission Error. You don't have the required role.",
          variant: toastVariant,
        });
        return;
      }
      toast({
        status: "error",
        description: "Submission Error. Please try again.",
        variant: toastVariant,
      });
      return;
    }

    toast({
      description: "Review submitted successfully",
      status: "success",
      variant: toastVariant,
    });
    fetchSubmittedBuilds();
  };

  return (
    <Container maxW="container.lg">
      <Container maxW="container.md" centerContent>
        <Heading as="h1">Review Submissions</Heading>
        <Text color={secondaryFontColor}>Pending submissions to validate.</Text>
        <Text color={secondaryFontColor} mb="6">
          Check our{" "}
          <Link href={RUBRIC_URL} color="teal.500" isExternal>
            Grading Rubric
          </Link>
          .
        </Text>
      </Container>
      <Heading as="h2" size="lg" mt={6} mb={4}>
        Challenges
      </Heading>
      <Box overflowX="auto">
        {isLoadingChallenges ? (
          <ChallengesTableSkeleton />
        ) : (
          <Table>
            <Thead>
              <Tr>
                <Th>Builder</Th>
                <Th>Challenge</Th>
                <Th>Submitted time</Th>
                <Th>Actions</Th>
              </Tr>
            </Thead>
            <Tbody>
              {!challenges || challenges.length === 0 ? (
                <Tr>
                  <Td colSpan={6}>
                    <Text color={secondaryFontColor} textAlign="center" mb={4}>
                      <Icon as={HeroIconInbox} w={6} h={6} color={secondaryFontColor} mt={6} mb={4} />
                      <br />
                      All challenges have been reviewed
                    </Text>
                  </Td>
                </Tr>
              ) : (
                challenges.map(challenge => (
                  <ChallengeReviewRow
                    key={`${challenge.userAddress}_${challenge.id}`}
                    challenge={challenge}
                    isLoading={isLoadingChallenges}
                    approveClick={handleSendChallengeReview("ACCEPTED")}
                    rejectClick={handleSendChallengeReview("REJECTED")}
                    userProvider={userProvider}
                  />
                ))
              )}
            </Tbody>
          </Table>
        )}
      </Box>
      <Heading as="h2" size="lg" mt={6} mb={4}>
        Builds
      </Heading>
      <Box overflowX="auto">
        {isLoadingDraftBuilds ? (
          <BuildsTableSkeleton />
        ) : (
          <Table mb={4}>
            <Thead>
              <Tr>
                <Th>Builder</Th>
                <Th>Build Name</Th>
                <Th>Description</Th>
                <Th>Branch URL</Th>
                <Th>Submitted time</Th>
                <Th>Actions</Th>
              </Tr>
            </Thead>
            <Tbody>
              {!draftBuilds || draftBuilds.length === 0 ? (
                <Tr>
                  <Td colSpan={5}>
                    <Text color={secondaryFontColor} textAlign="center" mb={4}>
                      <Icon as={HeroIconInbox} w={6} h={6} color={secondaryFontColor} mt={6} mb={4} />
                      <br />
                      All builds have been reviewed
                    </Text>
                  </Td>
                </Tr>
              ) : (
                draftBuilds.map(build => (
                  <BuildReviewRow
                    key={`${build.userAddress}_${build.id}`}
                    build={build}
                    isLoading={isLoadingDraftBuilds}
                    approveClick={handleSendBuildReview("ACCEPTED")}
                    rejectClick={handleSendBuildReview("REJECTED")}
                  />
                ))
              )}
            </Tbody>
          </Table>
        )}
      </Box>
    </Container>
  );
}
Example #24
Source File: Register.js    From GitMarkonics with MIT License 4 votes vote down vote up
function Register() {
  return (
    <>
    <Navbar />
    <div className="Register">
      <div className="Register__container">
        <div className="Register__containerTop">
          <div className="Register__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="Register__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              Register HERE
            </Heading>
            <InputGroup w="95%" borderRadius="full">
              <Input
                borderRadius="full"
                type="tel"
                placeholder="First Name"
                bgColor="gray.200"
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Last Name"
                bgColor="gray.200"
                marginLeft="4px"
              />
            </InputGroup>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillPersonFill color="#C6C6E8" fontSize="1.6rem" />
                }
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Username"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder=" Confirm Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Have Account?</a>
              </Link>
            <HStack className="Register__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="RegisterBtn"
              >
                Register
              </Button>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
  );
}
Example #25
Source File: BuilderListView.jsx    From scaffold-directory with MIT License 4 votes vote down vote up
export default function BuilderListView({ serverUrl, mainnetProvider, userRole }) {
  const [builders, setBuilders] = useState([]);
  const [isLoadingBuilders, setIsLoadingBuilders] = useState(false);
  const { secondaryFontColor } = useCustomColorModes();
  const isAdmin = userRole === USER_ROLES.admin;

  const columns = useMemo(
    () => [
      {
        Header: "Builder",
        accessor: "builder",
        disableSortBy: true,
        Cell: ({ value }) => <BuilderAddressCell builderId={value} mainnetProvider={mainnetProvider} />,
      },
      {
        Header: "Challenges",
        accessor: "challenges",
        sortDescFirst: true,
      },
      {
        Header: "Socials",
        accessor: "socials",
        disableSortBy: true,
        Cell: ({ value }) => <BuilderSocialLinksCell builder={value} isAdmin={isAdmin} />,
      },
      {
        Header: "Last Activity",
        accessor: "lastActivity",
        sortDescFirst: true,
        Cell: ({ value }) => <DateWithTooltip timestamp={value} />,
      },
    ],
    // eslint-disable-next-line
    [userRole],
  );

  useEffect(() => {
    async function fetchBuilders() {
      setIsLoadingBuilders(true);
      const fetchedBuilders = await axios.get(serverUrl + serverPath);

      const processedBuilders = fetchedBuilders.data.map(builder => ({
        builder: builder.id,
        challenges: getAcceptedChallenges(builder?.challenges)?.length ?? 0,
        socials: builder,
        lastActivity: builderLastActivity(builder),
      }));

      setBuilders(processedBuilders);
      setIsLoadingBuilders(false);
    }

    fetchBuilders();
  }, [serverUrl]);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data: builders,
      initialState: { pageIndex: 0, pageSize: 25, sortBy: useMemo(() => [{ id: "lastActivity", desc: true }], []) },
    },
    useSortBy,
    usePagination,
  );

  return (
    <Container maxW="container.lg">
      <Container maxW="container.md" centerContent>
        <Heading as="h1" mb="4">
          All Builders
        </Heading>
        <Text color={secondaryFontColor} textAlign="center" mb="10">
          List of Ethereum builders creating products, prototypes, and tutorials with{" "}
          <Link href="https://github.com/scaffold-eth/scaffold-eth" color="teal.500" isExternal>
            scaffold-eth
          </Link>
          .
        </Text>
      </Container>
      {isLoadingBuilders ? (
        <BuilderListSkeleton />
      ) : (
        <Box overflowX="auto" mb={8}>
          <Center mb={5}>
            <chakra.strong mr={2}>Total builders:</chakra.strong> {builders.length}
          </Center>
          <Table {...getTableProps()}>
            <Thead>
              {headerGroups.map(headerGroup => (
                <Tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => (
                    <Th {...column.getHeaderProps(column.getSortByToggleProps())}>
                      {column.render("Header")}
                      <chakra.span pl="4">
                        {column.isSorted ? (
                          column.isSortedDesc ? (
                            <TriangleDownIcon aria-label="sorted descending" />
                          ) : (
                            <TriangleUpIcon aria-label="sorted ascending" />
                          )
                        ) : null}
                      </chakra.span>
                    </Th>
                  ))}
                </Tr>
              ))}
            </Thead>
            <Tbody {...getTableBodyProps()}>
              {page.map(row => {
                prepareRow(row);
                return (
                  <Tr {...row.getRowProps()}>
                    {row.cells.map(cell => (
                      <Td {...cell.getCellProps()}>{cell.render("Cell")}</Td>
                    ))}
                  </Tr>
                );
              })}
            </Tbody>
          </Table>

          <Center mt={4}>
            <ButtonGroup>
              <Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
                {"<<"}
              </Button>
              <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
                {"<"}
              </Button>
              <Button onClick={() => nextPage()} disabled={!canNextPage}>
                {">"}
              </Button>
              <Button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
                {">>"}
              </Button>
            </ButtonGroup>
          </Center>
          <Center mt={4}>
            <Text mr={4}>
              Page{" "}
              <strong>
                {pageIndex + 1} of {pageOptions.length}
              </strong>{" "}
            </Text>
            <Box>
              <Select
                isFullWidth={false}
                value={pageSize}
                onChange={e => {
                  setPageSize(Number(e.target.value));
                }}
              >
                {[25, 50, 100].map(pageSizeOption => (
                  <option key={pageSizeOption} value={pageSizeOption}>
                    Show {pageSizeOption}
                  </option>
                ))}
              </Select>
            </Box>
          </Center>
        </Box>
      )}
    </Container>
  );
}
Example #26
Source File: SponsorCard.js    From codeursenseine.com with MIT License 4 votes vote down vote up
SponsorCard = ({ logoSrc, link, name, excerpt, children }) => {
  const containerRef = React.useRef();
  const contentRef = React.useRef();
  const [isExpandable, setIsExpandable] = React.useState(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

  React.useEffect(() => {
    if (containerRef.current && contentRef.current) {
      setIsExpandable(
        contentRef.current.offsetHeight - containerRef.current.offsetHeight > 0
      );
    }
  }, [setIsExpandable]);

  return (
    <>
      <Card
        ref={containerRef}
        as="article"
        maxH="22rem"
        position="relative"
        p={0}
      >
        <Box ref={contentRef} p={6}>
          {logoSrc && (
            <>
              <Link
                d="block"
                href={link}
                title={name}
                target="_blank"
                rel="noopener noreferrer"
              >
                <AspectRatio ratio={320 / 190}>
                  <Image src={logoSrc} alt={name} objectFit="fit" />
                </AspectRatio>
              </Link>
              <Divider />
            </>
          )}
          <Box d="flex" alignItems="baseline">
            <A href={link} title={name} target="_blank">
              {name}
            </A>
          </Box>
          <Text fontSize="sm">{excerpt}</Text>
        </Box>
        {isExpandable && (
          <Box
            position="absolute"
            bottom={0}
            left={0}
            right={0}
            pt={16}
            textAlign="center"
            background="linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%)"
          >
            <Button
              onClick={onOpen}
              variant="unstyled"
              d="inline-block"
              fontSize="sm"
              h="auto"
              m={4}
              p={4}
              py={2}
              _hover={{ color: "brand.600" }}
            >
              Lire la suite
            </Button>
          </Box>
        )}
      </Card>
      <Modal motionPreset="scale" isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader fontSize="xl">
            <Box>
              <Text>{name}</Text>
            </Box>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <MDXRenderer>{children}</MDXRenderer>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}
Example #27
Source File: App.js    From interspace.chat with GNU General Public License v3.0 4 votes vote down vote up
EasterEgg = () => {
  const [toggle, setToggle] = useState(false);
  const [openClaim, setOpenClaim] = useState(false);
  const ref = useRef(null);
  const claimRef = useRef(null);
  const responsiveButtonSize = useBreakpointValue({base: 'sm', lg: 'md'})
  const handleToggle = () => {
    if (typeof window !== "undefined") {
      setToggle(!toggle);
      ref.current.classList.remove("found");
    }
  };

  // const claimNFT = () => {
  //   if (typeof window !== "undefined") {
  //     setOpenClaim(!openClaim);
  //     // setToggle(!toggle);
  //     // ref.current.classList.remove("found");
  //   }
  // };
  return (
    <>
      <Box
        ref={ref}
        className="ee1"
        bg="rgba(0,0,0,0.3)"
        boxShadow="0 0 15px rgba(0,0,0,0.6)"
        backdropFilter="blur(7px)"
        color="white"
        position="fixed"
        bottom={0}
        left={0}
        right={0}
        maxW="100vw"
        textAlign="center"
        height={{base: '150px', md: "auto"}}
        opacity={0}
        // transform="translateY(100px)"
        transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.3s ease-in-out"
        zIndex={0}
        overflowX="clip"
        sx={{
          h4: {
            fontSize: "2vmax",
            fontWeight: 700,
          },
          "&.found": {
            opacity: 1,
            transform: "translateY(0)",
            zIndex: 2003,
          },
        }}
      >
        {openClaim && (
          <Button
            position="absolute"
            bottom={20}
            right={6}
            colorScheme="pink"
            bg="#FF61E6"
            boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
            size="sm"
            transition="all 0.3s 0.8s ease"
            // transform={`translateY(${openClaim ? 0 : "-70px"})`}
            onClick={() => setOpenClaim(!openClaim)}
            zIndex={2004}
          >
            Close the claimer
          </Button>
        )}
        <Box
          d="flex"
          position="relative"
          alignItems="center"
          justifyContent="space-around"
          flexFlow="row nowrap"
          mx="auto"
          maxW={{base: '100%', md: "5xl"}}
          py={3}
        >
          <Image src={BabyOctoGif} boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
          <Box flex={1}>
            <Text as="h4">
              <span role="img" aria-label="Octo emoji">
                ?
              </span>{" "}
              Nova's blessings!!{" "}
              <span role="img" aria-label="Octo emoji">
                ?
              </span>
            </Text>
            <Text as="p" fontWeight={500}>
              Welcome Anon!{" "}
              <span role="img" aria-label="Cheers/Clinking glasses emoji">
                ?
              </span>
              <br />
              You noticed little octo, all alone in space.{" "}
              <span role="img" aria-label="Loved up emoji">
                ?
              </span>{" "}
              <br /> For that Nova will bestow wonderment upon you! Do you wish
              to accept the gift?
              <br />
            </Text>
            <Button
              href="#"
              colorScheme="pink"
              bg="#FF61E6"
              size={responsiveButtonSize}
              mt={5}
              onClick={() => setOpenClaim(!openClaim)}
            >
              Claim your NFT
            </Button>
          </Box>

          <Image src={BabyOctoGif} boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
          <IconButton
            onClick={handleToggle}
            colorScheme="ghost"
            pos="absolute"
            top={3}
            right={0}
            size="sm"
            aria-label="Close easter egg"
            icon={<CloseIcon />}
            zIndex={2001}
          />
        </Box>
      </Box>
      {openClaim && (
        <Box
          ref={claimRef}
          position="fixed"
          top="12.5vh"
          left={0}
          height="75vh"
          minH="75vh"
          width="100vw"
          boxShadow="0 0 30px rgba(0,0,0,0.8)"
          // opacity={onScreen ? 1 : 0}
          transition="opacity 1.2s 0.8s ease-in-out"
          zIndex={2003}
          sx={{
            bg: "rgba(25,0,50,0.4)",
            backdropFilter: "blur(7px)",
          }}
        >
          <Container maxW={{base: '100%', md: "2xl"}} height="100%" py={12} align="center">
            <MinterInstance />
          </Container>
          <Box
            display="flex"
            position="absolute"
            bottom={0}
            right={0}
            width="100%"
            textAlign="center"
          >
            <Link
              href="https://testnets.opensea.io/assets?search[query]=0x91BBa1e0EE2DCC8d78Fa017588614f328d6d1885"
              isExternal
              fontWeight={700}
              fontSize="0.7vmax"
              // d="inline-block"
              mx="auto"
              p={3}
              bg="linear-gradient(90.24deg, #640DFB99 0.3%, rgba(100, 13, 251, 0.9) 80.16%)"
              borderRadius="5px 5px 0 0"
              boxShadow="0 0 5px rgba(0,0,0,0.6)"
              overflow="clip"
            >
              <span role="img" aria-label="Attention!">
                ?
              </span>{" "}
              Need more NFTs? View the contract on OpenSea. <ExternalLinkIcon />
            </Link>
          </Box>
        </Box>
      )}
    </>
  );
}
Example #28
Source File: ChallengeReviewRow.jsx    From scaffold-directory with MIT License 4 votes vote down vote up
export default function ChallengeReviewRow({ challenge, isLoading, approveClick, rejectClick, userProvider }) {
  const [comment, setComment] = useState(challenge.reviewComment ?? "");
  const [testPassed, setTestPassed] = useState(null);
  const [isRunningTests, setIsRunningTests] = useState(false);
  const { isOpen, onOpen, onClose } = useDisclosure();
  const address = useUserAddress(userProvider);

  if (!challengeInfo[challenge.id]) {
    return null;
  }

  // We asume that rejected challenges will always have review Comments.
  const isAutograded = challenge.autograding;
  // ToDo. Use the stored events.
  const isResubmitted = !isAutograded && !!challenge.reviewComment;

  const runTests = async () => {
    try {
      console.log("Testing challenge with the auto-grader");

      setIsRunningTests(true);
      setTestPassed(null);

      const result = await runAutograderTest(challenge.id, challenge.contractUrl, address);
      const resultData = result.data;

      console.log("Testing results", resultData);
      setTestPassed(resultData.success);
      setComment(resultData.feedback ?? resultData.error);
    } catch (e) {
      console.log("Error calling the auto-grader", e);
    } finally {
      setIsRunningTests(false);
    }
  };

  const challengeReviewDisplay = (
    <Link as={RouteLink} to={`/challenge/${challenge.id}`}>
      {challengeInfo[challenge.id].label}
      {isResubmitted && (
        <>
          <br />
          <Text fontSize="xs">(Resubmitted)</Text>
        </>
      )}
      {isAutograded && (
        <>
          <br />
          <Text fontSize="xs" color="orange.500">
            (Autograded)
          </Text>
        </>
      )}
    </Link>
  );

  const submittedMoment = moment(challenge.submittedTimestamp);

  const reviewRow = (
    <>
      <Td>
        <Link as={RouteLink} to={`/builders/${challenge.userAddress}`} pos="relative">
          <Address address={challenge.userAddress} w="12.5" fontSize="16" />
        </Link>
      </Td>
      <Td>{challengeReviewDisplay}</Td>
      <Td>
        <DateWithTooltip timestamp={challenge.submittedTimestamp} />
      </Td>
    </>
  );

  return (
    <Tr>
      {reviewRow}
      <Td>
        <Button type="button" colorScheme="blue" disabled={isLoading} className="danger" onClick={onOpen} size="xs">
          Review
        </Button>
      </Td>
      <Modal isOpen={isOpen} onClose={onClose} size="xl">
        <ModalOverlay />
        <ModalContent maxW="56rem">
          <ModalHeader>Review Challenge</ModalHeader>
          <ModalCloseButton />
          <Table mb={4}>
            <Thead>
              <Tr>
                <Th>Builder</Th>
                <Th>Challenge & Links</Th>
              </Tr>
            </Thead>
            <Tbody>
              <Tr>
                <Td>
                  <Link as={RouteLink} to={`/builders/${challenge.userAddress}`} pos="relative">
                    <Address address={challenge.userAddress} w="12.5" fontSize="16" />
                  </Link>
                </Td>
                <Td>
                  {challengeReviewDisplay}
                  <UnorderedList>
                    <ListItem>
                      <Link
                        // Legacy branchUrl
                        href={challenge.contractUrl || challenge.branchUrl}
                        color="teal.500"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        Contract
                      </Link>
                    </ListItem>
                    <ListItem>
                      <Link href={challenge.deployedUrl} color="teal.500" target="_blank" rel="noopener noreferrer">
                        Demo
                      </Link>
                    </ListItem>
                    <ListItem>
                      Submitted{" "}
                      <Tooltip label={submittedMoment.format("YYYY-MM-DD, HH:mm")}>
                        <chakra.span cursor="pointer">{submittedMoment.fromNow()}</chakra.span>
                      </Tooltip>
                    </ListItem>
                    <ListItem listStyleType="none" mt={2}>
                      <Flex align="center">
                        <Button onClick={runTests} isLoading={isRunningTests} mr={2}>
                          Run tests
                        </Button>
                        {isBoolean(testPassed) && (
                          <Badge colorScheme={testPassed ? "green" : "red"}>
                            {testPassed ? "Accepted" : "Rejected"}
                          </Badge>
                        )}
                      </Flex>
                    </ListItem>
                  </UnorderedList>
                </Td>
              </Tr>
            </Tbody>
          </Table>
          <ModalBody px={6} pb={0}>
            <Tabs variant="enclosed-colored">
              <TabList>
                <Tab>Write</Tab>
                <Tab>Preview</Tab>
              </TabList>
              <TabPanels align="left">
                <TabPanel p={0}>
                  <Textarea
                    onChange={e => {
                      const value = e.target.value;
                      setComment(value);
                    }}
                    placeholder="Comment"
                    style={{ marginBottom: 10 }}
                    rows={10}
                    value={comment}
                    borderTopRadius={0}
                  />
                </TabPanel>
                <TabPanel>
                  <ReactMarkdown components={ChakraUIRenderer(chakraMarkdownComponents)}>{comment}</ReactMarkdown>
                </TabPanel>
              </TabPanels>
            </Tabs>
          </ModalBody>
          <ModalFooter>
            <Button
              type="button"
              colorScheme="red"
              disabled={isLoading}
              className="danger"
              onClick={() => rejectClick(challenge.userAddress, challenge.id, comment)}
              size="sm"
              isFullWidth
            >
              Reject
            </Button>
            <Button
              type="button"
              colorScheme="green"
              disabled={isLoading}
              ml={3}
              onClick={() => approveClick(challenge.userAddress, challenge.id, comment)}
              size="sm"
              isFullWidth
            >
              Approve
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Tr>
  );
}
Example #29
Source File: Header.js    From interspace.chat with GNU General Public License v3.0 4 votes vote down vote up
export function SiteHeader() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const ref = useRef(null);
  const linkRef = useRef(null);
  const onScreen = useOnScreen(ref);
  const linkOnScreen = useOnScreen(linkRef)
  const disabledGenNotify = useDisabledGeneralNotify();
  const handleToggle = () => (isOpen ? onClose() : onOpen());
  const screenSize = useBreakpoint()
  console.log('s',screenSize);

  const NavLink = ({ href, children, offset }) => (
    <Link
      ref={linkRef}
      fontWeight={{ base: 500, lg: 700 }}
      px={2}
      py={1}
      rounded={"md"}
      textShadow="0 0 10px rgba(0, 0, 0, 0.8)"
      opacity={!linkOnScreen ? 1 : 0}
      transform={`translate3d(${!linkOnScreen ? 0 : -200}, 0, 0)`}
      transition={`all 0.2s ${0.6 + offset}s ease`}
      _hover={{
        textDecoration: "none",
        background: "linear-gradient(-90deg, #FF61E6 -29.22%, #7C56FF 107.53%)",
        backgroundClip: "text",
        WebkitTextFillColor: "transparent",
      }}
      href={href}
      onClick={handleToggle}
      color="white"
    >
      {children}
    </Link>
  );


  return (
    <>
      <Box
        ref={ref}
        as="header"
        bg="transparent"
        position="fixed"
        top={0}
        px={4}
        w="100%"
        maxW="100vw"
        h={{base: '75px', md: "100px"}}
        // transform={`translate3d(0, ${onScreen ? 0 : "-70px"}, 0)`}
        opacity={onScreen ? 1 : 0}
        transition="transform 0.3s 1s ease-in-out, opacity 0.6s 0.8s ease-in"
        zIndex={2000}
        sx={{
          a: {
            color: "white",
          },
        }}
      >
        <Flex
          h={{base: '75px', md: "100px"}}
          alignItems={"center"}
          justifyContent={"space-between"}
        >
          <Box width={{ base: "25%" }} h="2.5rem" overflow="visible" sx={{
            d: {base: 'inline-flex', md: 'none'},
          }}>
            <Button
              onClick={handleToggle}
              sx={{
                alignSelf: "center",
                justifySelf: "right",
                position: "relative",
                flexDirection: "column",
                justifyContent: "space-around",
                overflow: 'visible',
                w: { base: "2.25rem" },
                h: { base: "2.25rem" },
                background: "transparent",
                border: "none",
                cursor: "pointer",
                padding: 0,
                mx: 0,
                zIndex: 2003,
                "&:hover, &:focus,  &[data-hover]": {
                  outline: "none",
                  background: "transparent",
                  boxShadow: "none",
                },
                div: {
                  w: "100%",
                  h: "100%",
                  p: 0,
                  transition: "all 0.3s linear",
                  position: "relative",
                  transformOrigin: "1px",
                },
                "path, circle": {
                  fill: isOpen ? "transparent" : "transparent",
                  transition: "all 0.2s 0.2s ease",
                  stroke: isOpen ? "#7C56FF" : "#927CFF",
                },
                ".top-line": {
                  transition: "all 0.6s ease",
                  transform: isOpen
                    ? "rotate(-405deg) translate3d(1px, 3px, 0)"
                    : "rotate(0)",
                  transformOrigin: "center",
                },
                ".bottom-line": {
                  transition: "all 0.6s ease",
                  transform: isOpen
                    ? "rotate(405deg) translate3d(0px, -4px, 0)"
                    : "rotate(0)",
                  transformOrigin: "center",
                },
              }}
            >
              <MenuIcon2SVG toggle={isOpen} />
            </Button>
          </Box>
          <HStack spacing={8} alignItems={"center"}>
            <Link href="#home" flex={{base: 1}}>
              <Image
                src={MF2Logo}
                alt="MetaGame Logo"
                boxSize={{ base: "65px", md: "95px" }}
                objectFit="cover"
                transform={{ md: "translateY(15px) translateX(10px)" }}
                sx={{
                  transition: 'all 0.2s 0.1s ease',
                  filter: "drop-shadow(0 0 15px rgba(0,0,0,0.6))",
                  _hover: {
                    filter: "drop-shadow(0 0 15px #FF61E696)",
                  }
                }}
              />
            </Link>
            <HStack
              as={"nav"}
              spacing={4}
              display={{ base: "none", md: "flex" }}
            >
              {Links.map((link, i) => (
                <NavLink key={`desktop-${link.name}`} href={link.href}>
                  {link.name}
                </NavLink>
              ))}
            </HStack>
          </HStack>
          <Flex alignItems="center" justifyContent="end" width={{ base: "25%", md: 'auto' }}>
            {screenSize !== 'base' ? (
              <Button
                variant={"solid"}
                colorScheme={"purple"}
                bg="#927CFF"
                boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
                size="sm"
                mr={0}
                onClick={disabledGenNotify}
              >
                Connect
              </Button>
            ) : (
              <IconButton
              icon={<BiWalletAlt />}
              aria-label="Connect Web3 wallet"
              flex={0}
              fontSize={{base: '12vmin', lg: "2vmax"}}
              colorScheme="ghost"
              color="#927CFF"
              onClick={disabledGenNotify}
              alignSelf="center"
              // filter="drop-shadow(0 0 15px #FF61E6)"
            />
            )}
          </Flex>
        </Flex>

        {/* {isOpen ? ( */}
          <Box
            display={{ base: "flex", md: "none" }}
            position="fixed"
            top={0}
            left={0}
            w="100%"
            minW="100%"
            minH="100vh"
            alignItems="center"
            justifyContent="center"
            p={5}
            pt="100px"
            bg="linear-gradient(0deg, rgba(41,2,80,0.1) 0%, rgba(25,0,50,0.5) 40%)"
            backdropFilter="blur(7px)"
          transition="transform 0.3s 0.1s ease, opacity 0.3s 0.2s"
          boxShadow="0 0 15px #00000070"

          opacity={isOpen ? 1 : 0}
            transform={`translate3d(0, ${isOpen ? 0 : '-100vh'}, 0)`}
            zIndex={-1}
          >
            <Stack as={"nav"} spacing={4} height="auto">
              {Links.map((link) => (
                <NavLink key={`mobile-${link.name}`} href={link.href}>
                  {link.name}
                </NavLink>
              ))}
            </Stack>
          </Box>
        {/* ) : null} */}
      </Box>
    </>
  );
}