@chakra-ui/react#Image JavaScript Examples

BuildCard = ({ build }) => {
  const { borderColor, secondaryFontColor } = useCustomColorModes();
  return (
    <Box borderWidth="1px" borderRadius="lg" borderColor={borderColor} overflow="hidden">
      <Box bgColor={borderColor} borderBottom="1px" borderColor={borderColor}>
        <Image src={`${ASSETS_BASE_URL}/${build.image}`} h="200px" mx="auto" />
      </Box>
      <Flex pt={9} pb={4} px={4} direction="column" minH="240px">
        <Text fontWeight="bold">{build.name}</Text>
        <Text color={secondaryFontColor}>{build.desc}</Text>
        <Spacer />
        <ButtonGroup variant="outline" size="sm" spacing="2">
          <Button disabled variant="outline" isFullWidth>
            Fund
          </Button>
          <Button isFullWidth as="a" href={build.branch} target="_blank" rel="noopener noreferrer">
            Fork
          </Button>
        </ButtonGroup>
      </Flex>
    </Box>
  );
}

export function FlipCardImage(props) {
  return (
    <Image
      objectFit="cover"
      borderStyle="solid"
      borderWidth="1px"
      borderColor="brandGray.016"
      rounded="lg"
      height="full"
      ignoreFallback
      {...props}
    />
  )
}

export function FlipImage({
  src,
  objectFit = 'scale-down',
  roundedTop,
  roundedBottom,
  ...props
}) {
  return (
    <AspectRatio
      ratio={4 / 3}
      bg="gray.50"
      border="1px"
      borderColor="brandGray.016"
      roundedTop={roundedTop}
      roundedBottom={roundedBottom}
      {...props}
    >
      {src ? (
        <Image
          src={src}
          objectFit={objectFit}
          fallbackSrc="/static/flips-cant-icn.svg"
          roundedTop={roundedTop}
          roundedBottom={roundedBottom}
        />
      ) : (
        <EmptyFlipImage />
      )}
    </AspectRatio>
  )
}

function BadFlipImage(props) {
  return (
    <AspectRatio
      ratio={4 / 3}
      h={['50px', '100px']}
      display="flex"
      flexGrow="0.25"
    >
      <Image {...props} />
    </AspectRatio>
  )
}

export function Logo() {
  return (
    <ChakraBox my={8} alignSelf="center">
      <Image
        src="/static/logo.svg"
        alt="Idena logo"
        w={['88px', 14]}
        ignoreFallback
      />
    </ChakraBox>
  )
}

Podcast = ({ podcast }) => {
  const { title, itunesId, description, artwork, categories } = podcast
  const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE)
  return (
    <Flex rounded="lg" borderWidth="2px" m={4}>
      <Box width="200px">
        <Image src={artwork} boxSize="200px" />
        <Button
          width="100%"
          onClick={() =>
            subscribeMutation({ variables: { itunesID: itunesId } })
          }
        >
          <AddIcon />
        </Button>
      </Box>
      <Box m={4} maxWidth="300px">
        <Heading noOfLines={2}>{title}</Heading>
        <Text noOfLines={3}>{description}</Text>
        <Stack isInline>
          {categories.slice(0, 3).map((c) => {
            return <Tag key={c}>{c}</Tag>
          })}
        </Stack>
      </Box>
    </Flex>
  )
}

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>
  );
}

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>,
}

Logo = (props) => {
  const theme = useTheme();

  return (
    <Image
      src={theme.logos.white}
      ignoreFallback
      alt={theme.logos.alt}
      {...props}
    />
  );
}

MeetupSpeakers = ({ speakers, ...props }) => (
  <StackInline spacing={10} {...props}>
    {speakers &&
      speakers.map((speaker) => (
        <Box key={speaker.twitter}>
          <Heading as="h5" size="sm" color="brand.900">
            {speaker.name}
          </Heading>
          <Image
            boxSize="7.5rem"
            objectFit="cover"
            src={speaker.avatar}
            alt={speaker.name}
            fallbackSrc="/default.jpg"
            borderRadius={4}
            mt={2}
          />
          {speaker.twitter && (
            <A href={`https://twitter.com/${speaker.twitter}`} target="_blank">
              @{speaker.twitter}
            </A>
          )}
        </Box>
      ))}
  </StackInline>
)

SpeakerPreview = ({ speaker }) => (
  <Flex mt={1} align="center">
    <Box mr={4}>
      <AspectRatio ratio={1} w="2rem" maxW="100%">
        <Image
          src={speaker?.childMdx?.frontmatter?.image?.publicURL}
          borderRadius={4}
        />
      </AspectRatio>
    </Box>
    <Text>{speaker?.childMdx?.frontmatter?.name}</Text>
  </Flex>
)

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>
  )
}

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>
  );
}

function Flip({
  isLoading,
  images,
  orders,
  answer,
  variant,
  isCorrect,
  isSmall,
}) {
  const theme = useTheme()
  const isSelected = answer === variant
  const borderRadius = useBreakpointValue(['lgx', 'lg'])

  if (isLoading) return <LoadingFlip isSmall={isSmall} />

  return (
    <FlipHolder
      isSmall={isSmall}
      borderColor={
        isSelected ? (isCorrect ? 'blue.500' : 'red.500') : 'blue.025'
      }
      boxShadow={
        isSelected
          ? `0 0 2px 3px ${
              isCorrect ? theme.colors.blue['025'] : theme.colors.red['025']
            }`
          : 'none'
      }
      opacity={isSelected ? 1 : 0.3}
    >
      {reorderList(images, orders[variant - 1]).map((src, idx) => (
        <Box
          key={idx}
          height="100%"
          position="relative"
          overflow="hidden"
          roundedTop={idx === 0 ? borderRadius : 0}
          roundedBottom={idx === images.length - 1 ? borderRadius : 0}
        >
          <Box
            background={`center center / cover no-repeat url(${src})`}
            filter="blur(6px)"
            zIndex={1}
            position="absolute"
            top={0}
            left={0}
            right={0}
            bottom={0}
          />
          <Image
            ignoreFallback
            src={src}
            alt="current-flip"
            height="100%"
            width="100%"
            objectFit="fit"
            objectPosition="center"
            textAlign="center"
            position="relative"
            zIndex={2}
          />
        </Box>
      ))}
    </FlipHolder>
  )
}

export function AdMediaInput({
  name,
  value,
  label,
  description,
  fallbackSrc,
  maybeError,
  onChange,
  ...props
}) {
  const src = React.useMemo(
    () =>
      isValidImage(value) ? URL.createObjectURL(value) : value ?? adFallbackSrc,
    [value]
  )

  return (
    <FormControl isInvalid={Boolean(maybeError)}>
      <FormLabel htmlFor={name} m={0} p={0}>
        <VisuallyHiddenInput
          id={name}
          name={name}
          type="file"
          accept="image/png,image/jpg,image/jpeg"
          onChange={async e => {
            if (onChange) {
              const {files} = e.target
              if (files.length) {
                const [file] = files
                if (hasImageType(file)) {
                  onChange(file)
                }
              }
            }
          }}
          {...props}
        />
        <HStack spacing={4} align="center" cursor="pointer">
          <Box flexShrink={0}>
            {src !== adFallbackSrc ? (
              <AdImage src={src} width={70} />
            ) : (
              <Center
                bg="gray.50"
                borderWidth={1}
                borderColor="gray.016"
                rounded="lg"
                p="3"
              >
                <Image src={fallbackSrc} ignoreFallback boxSize="44px" />
              </Center>
            )}
          </Box>
          <Stack>
            <HStack>
              <LaptopIcon boxSize="5" color="blue.500" />
              <Text color="blue.500" fontWeight={500}>
                {label}
              </Text>
            </HStack>
            <SmallText>{description}</SmallText>
          </Stack>
        </HStack>
        <AdFormError>{maybeError}</AdFormError>
      </FormLabel>
    </FormControl>
  )
}

export function AdImage({
  src: initialSrc,
  fallbackSrc = adFallbackSrc,
  objectFit = 'contain',
  ...props
}) {
  const boxProps = pick(props, ['w', 'width', 'h', 'height', 'boxSize'])
  const imageProps = omit(props, Object.keys(boxProps))

  const [src, setSrc] = React.useState()

  React.useEffect(() => {
    setSrc(initialSrc)
  }, [initialSrc])

  const isFallbackSrc = src === fallbackSrc

  return (
    <AspectRatio
      ratio={1}
      flexShrink={0}
      objectFit={objectFit}
      sx={{
        '& > img': {
          objectFit,
        },
      }}
      position="relative"
      rounded="lg"
      // borderWidth={1}
      // borderColor="gray.016"
      overflow="hidden"
      {...boxProps}
    >
      <>
        {isFallbackSrc || (
          <Box position="relative" filter="blur(20px)">
            <Image
              src={src}
              ignoreFallback
              objectFit="cover"
              onError={() => {
                setSrc(fallbackSrc)
              }}
              h="full"
              w="full"
              position="absolute"
              inset={0}
              zIndex="hide"
            />
          </Box>
        )}
        <Image
          src={src}
          ignoreFallback
          objectFit={objectFit}
          bg={isFallbackSrc ? 'gray.50' : 'transparent'}
          onError={() => {
            setSrc(fallbackSrc)
          }}
          {...imageProps}
        />
      </>
    </AspectRatio>
  )
}

export default function ManyTabs() {
  const router = useRouter()
  const {t} = useTranslation()

  return (
    <Flex
      flexWrap="wrap"
      color="brand.gray"
      bg="gray.100"
      fontSize="md"
      h="100vh"
      flex={1}
      w="100%"
      align="center"
      justify="center"
    >
      <Flex align="center" justify="center" px={20} py={20} bg="white">
        <Stack alignItems="center" spacing={4}>
          <Image
            ignoreFallback
            src="/static/idena-logo-circle.svg"
            alt="logo"
            w={16}
          />
          <Heading fontSize="lg" fontWeight={500} color="gray.500">
            {t('Error, many tabs…')}
          </Heading>
          <Text color="muted" w="320px" textAlign="center">
            {t(
              'Idena supports only one active tab with the app. Please reload this page to continue using this tab or close it.'
            )}
          </Text>
          <IconButton
            onClick={() => router.reload()}
            rightIcon={<RefreshIcon boxSize={5} />}
          >
            {t('Reload page')}
          </IconButton>
        </Stack>
      </Flex>
    </Flex>
  )
}

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>
  )
}

ProductDetails = () => {
  const { product } = useSelector(state => state.product);
  const dispatch = useDispatch();
  const { state } = useLocation() || {};

  const params = useParams();

  const addItemToCartHandler = e => {
    e.stopPropagation();
    e.preventDefault();
    dispatch(addItemToCart(product));
  };

  useEffect(() => {
    if (!params.id) return;
    if (state?.item) {
      dispatch(setProductDetails(state?.item));
    } else {
      dispatch(fetchProductDetails(params.id));
    }
    return () => {};
  }, [params.id, dispatch, state?.item]);

  if (!product) return <Box m="3">loading...</Box>;

  return (
    <Box
      m="3"
      boxShadow="base"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
    >
      <SimpleGrid columns={{ sm: 1, md: 2, lg: 2 }} spacing="40px">
        <Center>
          <Box p="6">
            <Image src={product.image} alt={product.title} maxH="400" />
          </Box>
        </Center>
        <Box p="6">
          <Box d="flex" alignItems="baseline">
            <Box
              color="gray.500"
              fontWeight="semibold"
              letterSpacing="wide"
              fontSize="xs"
              textTransform="uppercase"
            >
              {product.category}
            </Box>
          </Box>

          <Box textAlign="left">${product.price}</Box>
          <Box fontWeight="semibold" mt="1" as="h2" textAlign="left">
            Product Info:
          </Box>
          <Box textAlign="left" fontSize="md">
            {product.description}
          </Box>
          <Button
            onClick={addItemToCartHandler}
            m={3}
            variant={'solid'}
            colorScheme={'teal'}
            size={'sm'}
          >
            Add to Cart
          </Button>
        </Box>
      </SimpleGrid>
    </Box>
  );
}

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>
  );
}

Item = ({ item }) => {
  const dispatch = useDispatch();

  const addItemToCartHandler = e => {
    e.stopPropagation();
    e.preventDefault();
    dispatch(addItemToCart(item));
  };

  return (
    <Link to={{ pathname: `/product/${item.id}`, state: { item } }}>
      <Box
        boxShadow="base"
        maxW="sm"
        borderWidth="1px"
        borderRadius="lg"
        overflow="hidden"
      >
        <Box p="6">
          <Center>
            <Image
              _hover={{ transform: `scale(1.1)` }}
              src={item.image}
              alt={item.title}
              maxH="400"
              height="400"
            />
          </Center>
        </Box>

        <Box p="6">
          <Box d="flex" alignItems="baseline">
            <Box
              color="gray.500"
              fontWeight="semibold"
              letterSpacing="wide"
              fontSize="xs"
              textTransform="uppercase"
            >
              {item.category}
            </Box>
          </Box>

          <Box
            mt="1"
            fontWeight="semibold"
            as="h4"
            lineHeight="tight"
            isTruncated
            whiteSpace="wrap"
            textAlign="left"
          >
            {item.title}
          </Box>
          <Flex justifyContent="space-between">
            <Box textAlign="left">${item.price}</Box>
            <Tooltip label="Add to Cart" fontSize="md">
              <Button variant="ghost" p={2} onClick={addItemToCartHandler}>
                <Icon as={MdShoppingCart} w={6} h={6} />
              </Button>
            </Tooltip>
          </Flex>
        </Box>
      </Box>
    </Link>
  );
}

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>
    )
}

SpeakerCard = ({ speaker }) => {
  const {
    name,
    image: { publicURL },
    company,
    twitterLink,
    githubLink,
  } = speaker?.childMdx?.frontmatter;

  const { body } = speaker?.childMdx;

  return (
    <Card borderLeftWidth={2} borderLeftColor="brand.600">
      <Flex>
        <Box mr={4}>
          <AspectRatio ratio={1} w="6em" maxW="100%">
            <Image src={publicURL} borderRadius={4} />
          </AspectRatio>
        </Box>
        <Box>
          <Heading fontSize="lg">{name}</Heading>
          <Heading fontSize="md">{company}</Heading>
          {twitterLink && (
            <IconButton
              as="a"
              target="_blank"
              href={twitterLink}
              title={`${name} Twitter`}
              icon={<FaTwitter />}
              variant="ghost"
              colorScheme="brand"
              rel="noopener noreferrer"
            />
          )}
          {githubLink && (
            <IconButton
              as="a"
              target="_blank"
              href={githubLink}
              title={`${name} Github`}
              icon={<FaGithub />}
              variant="ghost"
              colorScheme="brand"
              rel="noopener noreferrer"
            />
          )}
        </Box>
      </Flex>
      {body && (
        <Box mt={4}>
          <MDXRenderer mt={4}>{body}</MDXRenderer>
        </Box>
      )}
    </Card>
  );
}

// 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>
  );
}

SponsorsList = ({ ...props }) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          currentYear
        }
      }
      allFile(
        filter: {
          sourceInstanceName: { eq: "sponsors" }
          childMdx: { frontmatter: { sponsor: { ne: "disabled" } } }
        }
        sort: { fields: childMdx___frontmatter___name }
      ) {
        nodes {
          childMdx {
            frontmatter {
              name
              link
              sponsor
              logo {
                publicURL
              }
            }
          }
        }
      }
    }
  `);

  const sponsors = data.allFile.nodes.filter(
    (node) => !!node.childMdx?.frontmatter?.sponsor
  );

  const year = data?.site?.siteMetadata?.currentYear;

  return (
    <Stack spacing={8} {...props}>
      <Heading as="h2" size="md">
        Sponsors {year} : {sponsors.length} sponsor
        {sponsors.length > 1 ? "s" : ""}.
      </Heading>
      <SimpleGrid columns={{ base: 3, sm: 4, lg: 5 }} gap={4}>
        {sponsors.map(({ childMdx: { frontmatter } }) => (
          <Card
            key={slugify(frontmatter.name)}
            p={0}
            isLink
            as="a"
            href={frontmatter.link}
          >
            <AspectRatio ratio={320 / 190}>
              <Image
                src={frontmatter.logo?.publicURL}
                alt={frontmatter.name}
                objectFit="fit"
              />
            </AspectRatio>
          </Card>
        ))}
      </SimpleGrid>
    </Stack>
  );
}

export default function Header() {
  const { username, setUsername, auth, randomUsername } = useAppContext();
  return (
    <Grid
      templateColumns="max-content 1fr min-content"
      justifyItems="center"
      alignItems="center"
      bg="white"
      position="sticky"
      top="0"
      zIndex="10"
      borderBottom="20px solid #edf2f7"
    >
      <GridItem justifySelf="start" m="2">
        <Image src="/logo.png" height="30px" ml="2" />
      </GridItem>
      {auth.user() ? (
        <>
          <GridItem justifySelf="end" alignSelf="center" mr="4">
            Welcome <strong>{username}</strong>
          </GridItem>
          <Button
            marginRight="4"
            size="sm"
            variant="link"
            onClick={() => {
              const { error } = auth.signOut();
              if (error) return console.error("error signOut", error);
              const username = randomUsername();
              setUsername(username);
              localStorage.setItem("username", username);
            }}
          >
            Log out
          </Button>
        </>
      ) : (
        <>
          <GridItem justifySelf="end" alignSelf="end">
            <NameForm username={username} setUsername={setUsername} />
          </GridItem>
          <Button
            size="sm"
            marginRight="2"
            colorScheme="teal"
            rightIcon={<FaGithub />}
            variant="outline"
            onClick={() =>
              auth.signIn({
                provider: "github",
              })
            }
          >
            Login
          </Button>
        </>
      )}
    </Grid>
  );
}

function Header(props) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	const web3Context = useContext(Web3Context);
	const { connectWallet, signerAddress, checkIfMemberExists } = web3Context;

	function connect() {
		connectWallet().then(async (data) => {
			console.log(data.provider.networkVersion);
			if (data.provider.networkVersion == "80001") {
				checkIfMemberExists(data).then((value) => {
					if (value === true) {
						props.setIsMember(true);
					}
				});
			} else {
				onOpen();
			}
		});
	}

	return (
		<HStack
			backgroundColor='white'
			zIndex='1'
			position='fixed'
			width='100vw'
			boxShadow='base'
			px='250px'
			py={3}>
			<Modal
				isOpen={isOpen}
				onClose={onClose}
				closeOnOverlayClick={false}>
				<ModalOverlay />
				<ModalContent>
					<ModalHeader>Invalid Network</ModalHeader>
					<ModalBody>Please connect to Mumbai Testnet.</ModalBody>
				</ModalContent>
			</Modal>
			<Link to='/'>
				<Image height='35px' src='../assets/DAOInsure.png' />
			</Link>
			<Spacer />
			<Link to='/profile'>
				<Button colorScheme='whatsapp'>Profile</Button>
			</Link>
			<Link to='/activity'>
				<Button colorScheme='whatsapp'>Activity</Button>
			</Link>

			{signerAddress !== "" && signerAddress !== undefined ? (
				<Button colorScheme='whatsapp' variant='solid'>
					{`${signerAddress.substr(0, 6)}...${signerAddress.substr(
						-6
					)}`}
				</Button>
			) : (
				<Button
					onClick={connect}
					colorScheme='whatsapp'
					variant='solid'>
					Connect Wallet
				</Button>
			)}
		</HStack>
	);
}

Episode = ({ episode, playlists }) => {
  const [addEpisode] = useMutation(ADD_EPISODE_TO_PLAYLIST)

  const isEpisodeInPlaylist = (playlistName) => {
    const playlist = playlists.filter((i) => {
      return playlistName === i.name
    })

    const episodes = playlist[0].episodes?.map((v) => {
      return v.id
    })

    return episodes?.includes(episode.id)
  }

  return (
    <Flex
      border="1px"
      rounded="lg"
      style={{ maxWidth: '700px', width: '100%' }}
    >
      <Box w="150px">
        <Image boxSize="150px" src={episode.podcast.image} m={2} />
        <Menu m={2} w="150px">
          <MenuButton m={2} w="150px" as={Button}>
            <AddIcon />
          </MenuButton>
          <MenuList>
            {playlists?.map((v) => {
              return (
                <MenuItem
                  icon={isEpisodeInPlaylist(v.name) ? <CheckIcon /> : null}
                  key={v.name}
                  onClick={() =>
                    addEpisode({
                      variables: {
                        episodeId: episode.id,
                        playlistName: v.name,
                      },
                    })
                  }
                >
                  {v.name}
                </MenuItem>
              )
            })}
          </MenuList>
        </Menu>
      </Box>
      <Flex direction="column" ml={4} w="100%">
        <div>
          <Accordion allowToggle>
            <AccordionItem>
              <h2>
                <AccordionButton>
                  <Box flex="1" textAlign="left">
                    <Heading size="sm">{episode.title}</Heading>
                  </Box>
                  <AccordionIcon />
                </AccordionButton>
              </h2>
              <AccordionPanel pb={4} m={4}>
                <div dangerouslySetInnerHTML={{ __html: episode.summary }} />
              </AccordionPanel>
            </AccordionItem>
          </Accordion>
        </div>
        <Flex direction="column">
          <Text ml={4} fontSize="lg" isTruncated>
            {episode.podcast.title}
          </Text>
          <Text ml={4} as="i">
            {`${moment(episode.pubDate).format('MMMM Do YYYY')}`}
          </Text>
        </Flex>
        <div style={{ marginTop: 'auto' }}>
          <audio style={{ width: '100%' }} controls>
            <source src={episode.audio} type="audio/mpeg"></source>
          </audio>
        </div>
      </Flex>

      {/* <div>{episode.audio}</div>
      <div>{episode.id}</div>
      <div>{episode.podcast.image}</div> */}
    </Flex>
  )
}

Dashboard = () => {
	const { isLoading, user } = useAuth0();
	const [check] = useMediaQuery("(min-width: 1025px)");
	const { isOpen, onOpen, onClose } = useDisclosure();
	const [formName, setFormName] = React.useState();
	let userEmail = user.email;
	let apiKey = process.env.REACT_APP_APIKEY;
	let apiUrl = process.env.REACT_APP_HOSTURL;
	const [data, setData] = React.useState();
	const getData = async () => {
		let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
		setData(temp.data[0]);
		console.log(data);
	};
	useEffect(() => {
		getData();
		if (data === undefined) {
			setTimeout(() => getData(), 2500);
		}
	}, []);
	let responses = 0;
	if (data) {
		for (let i = 0; i < data.forms.length; i++) {
			responses += data.forms[i].formData.length;
		}
	}

	const postApiData = async () => {
		let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
			email: user.email,
			formName: formName,
			url: "",
		});
		getData();
	};
	const addNewForm = () => {
		if (formName === "") {
			toast.error("Form is empty?");
		} else {
			//  console.log(data.forms[0].formName);
			let isCopy = false;
			for (let i = 0; i < data.forms.length; i++) {
				if (data.forms[i].formName === formName) {
					isCopy = true;
				}
			}
			if (isCopy) {
				toast.error("form with such name already exits ");
			} else {
				postApiData();
				setTimeout(() => getData(), 2000);
				onClose();
				setTimeout(
					() => toast.success("Form Have beeen added ?"),
					2000
				);
			}
		}
	};

	return (
		<Box backgroundColor='whiteAlpha.100'>
			<Box
				padding='6'
				boxShadow='2xl'
				align='center'
				margin='2%'
				borderRadius={check ? "full" : "0 "}>
				<Flex align='center' flexDirection={check ? "row" : "column"}>
					<Flex>
						<Image src={user.picture} borderRadius='full' />
						<Text
							mt='10%'
							ml='20px'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'
							fontSize={check ? "3xl" : "xl"}>
							{user.name}
						</Text>
					</Flex>

					<Flex align='center' ml={check ? "40%" : "10%"}>
						<Box>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									responses
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>
							<Text>Responses</Text>
						</Box>
						<Box ml='50%'>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									data.forms.length
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>

							<Text>Forms</Text>
						</Box>
					</Flex>
				</Flex>
			</Box>

			<Box
				padding='6'
				boxShadow='xl'
				margin='2%'
				borderRadius={check ? "25px" : "0 "}>
				<Flex justifyContent='space-between'>
					<Text
						margin='5%'
						bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
						bgClip='text'
						fontSize='3xl'>
						Forms
					</Text>
					<Button margin='5%' colorScheme='orange' onClick={onOpen}>
						New form
					</Button>
				</Flex>
				<Divider margin='2%' colorScheme='blackAlpha'></Divider>
				{data ? (
					data.forms.map((x) => (
						<FormCard
							formName={x.formName}
							responses={x.formData.length}
							formData={x.formData}
							redirectUrl={x.redirectUrl}
							email={userEmail}></FormCard>
					))
				) : (
					<>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
					</>
				)}

				{data && data.forms.length === 0 ? (
					<>
						<Image
							src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
							width='25%'
							height='25%'
							ml='38%'
						/>
						<Text align='center'>
							You haven't created a form Yet{" "}
						</Text>
					</>
				) : (
					<> </>
				)}
			</Box>
			<Drawer
				onClose={onClose}
				isOpen={isOpen}
				size={check ? "xs" : "xs"}>
				<DrawerOverlay />
				<DrawerContent>
					<DrawerHeader align='center'>
						<Text
							margin='1%'
							fontWeight='extraBold'
							fontSize='3xl'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'>
							Add Form
						</Text>
						<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
						<Text></Text>
					</DrawerHeader>
					<DrawerBody>
						<Box>
							<Flex>
								<Input
									onChange={(e) =>
										setFormName(e.target.value)
									}
									placeholder='Form Name'
								/>
								<Button
									ml='0.5%'
									colorScheme='orange'
									onClick={addNewForm}>
									{" "}
									&gt;{" "}
								</Button>
							</Flex>
						</Box>
						<Box></Box>
					</DrawerBody>
				</DrawerContent>
			</Drawer>

			<Toaster />
		</Box>
	);
}