@chakra-ui/react#AspectRatio JavaScript Examples

The following examples show how to use @chakra-ui/react#AspectRatio. 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: ConferenceCard.js    From codeursenseine.com with MIT License 6 votes vote down vote up
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>
)
Example #2
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up
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>
  )
}
Example #3
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up
function BadFlipImage(props) {
  return (
    <AspectRatio
      ratio={4 / 3}
      h={['50px', '100px']}
      display="flex"
      flexGrow="0.25"
    >
      <Image {...props} />
    </AspectRatio>
  )
}
Example #4
Source File: SpeakerCard.js    From codeursenseine.com with MIT License 5 votes vote down vote up
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>
  );
}
Example #5
Source File: SponsorsList.js    From codeursenseine.com with MIT License 5 votes vote down vote up
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>
  );
}
Example #6
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up
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>
  )
}
Example #7
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up
export function FlipCardImageBox({children, ...props}) {
  return (
    <AspectRatio h={150} w={150} position="relative" {...props}>
      <Box>{children}</Box>
    </AspectRatio>
  )
}
Example #8
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up
ElementFlipImage = ScrollElement(AspectRatio)
Example #9
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 #10
Source File: index.js    From codeursenseine.com with MIT License 4 votes vote down vote up
Organisers = ({ pageContext }) => {
  const { organisers } = pageContext;

  const socials = [
    { name: "twitter", icon: <FaTwitter /> },
    { name: "linkedin", icon: <FaLinkedin /> },
    { name: "github", icon: <FaGithub /> },
  ];

  return (
    <Layout theme="ces">
      <OGImage path="/images/ces/social.jpg" />
      <Seo title="Organisateurs" />
      <Heading as="h1" mb={8}>
        Organisateurs
      </Heading>

      <Stack spacing={6}>
        <Heading size="lg">Associations</Heading>
        <Text>
          Codeurs en Seine est une association dont le but est la promotion et
          le partage des pratiques et des nouveautés technologiques entre les
          acteurs du développement informatique.
        </Text>

        <Text>
          En plus de la conférence annuelle Codeurs en Seine, nous organisons
          des meetups et des ateliers tout au long de l'année, sur Rouen et ses
          environs.
        </Text>

        <Text>
          Codeurs en Seine représente le Normandy Java User Group et Normandy
          Agile User Group.
        </Text>

        <Text>
          Elle est également une étape de l'
          <A href="http://www.agiletour.org/">Agile Tour</A>.
        </Text>
        <Heading size="lg">Équipe</Heading>
        <Text mb={8}>
          Codeurs en Seine est propulsé par une équipe de bénévoles passionnés :
        </Text>
        <Grid templateColumns="repeat(auto-fit, minmax(6rem, 1fr))" gap={6}>
          {organisers.map((organiser) => (
            <Stack
              alignItems="center"
              key={organiser.childMdx.frontmatter.name}
            >
              <AspectRatio ratio={1} w="6em" maxW="100%">
                <Image
                  fallbackSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
                  src={organiser.childMdx.frontmatter.image.publicURL}
                  alt={organiser.childMdx.frontmatter.name}
                  boxShadow="brand"
                  objectFit="cover"
                  borderRadius={4}
                />
              </AspectRatio>
              <Text textAlign="center" fontSize="sm">
                {organiser.childMdx.frontmatter.name}
              </Text>
              <Flex flexWrap="wrap">
                {socials.map(
                  (social) =>
                    organiser.childMdx.frontmatter[social.name] && (
                      <IconButton
                        key={social.name}
                        as="a"
                        target="_blank"
                        href={organiser.childMdx.frontmatter[social.name]}
                        aria-label={`${organiser.childMdx.frontmatter.name} ${social.name}`}
                        icon={social.icon}
                        variant="ghost"
                        colorScheme="brand"
                        size="sm"
                        d="inline-flex"
                      />
                    )
                )}
              </Flex>
            </Stack>
          ))}
        </Grid>
      </Stack>
    </Layout>
  );
}
Example #11
Source File: Hero.js    From benjamincarlson.io with MIT License 4 votes vote down vote up
export default function Hero() {
    return (
        <Box bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")}>
            <Flex
                w="100%"
                flexDir={["column", "column", "row"]}
                align="center"
                px={4}
                mt={[8, 8, 16]}
                mb={8}
                maxW="1200px"
                mx="auto"
            >
                <Flex flexDir="column" w={["100%", "100%", "50%"]} mr={[0, 0, 4]}>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: .4 }}
                    >
                        <Heading
                            letterSpacing="tight"
                            mb={4}
                            as="h1"
                            size="xl"
                            fontWeight={700}
                        >
                            Hello! I'm Benjamin Carlson -
                        </Heading>
                    </motion.div>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: .8 }}
                    >
                        <Text
                            fontSize="xl"
                            color={useColorModeValue("gray.600", "gray.500")}
                            mb={6}
                        >
                            A <strong>software engineer ?‍?</strong>, <strong>creator ?</strong>, and <strong>student ?‍?</strong> living and working in CT. You've stumbled onto my online portfolio, resume, blog, and all things in between.
                        </Text>
                    </motion.div>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: 1.2 }}
                    >
                        <Flex flexDir={["column", "row", "row"]}>
                            <Link href="https://youtube.com/benjamincarlson" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} mr={[0, 2, 2]} mb={[2, 0, 0]} isExternal>
                                <Button
                                    w={["100%", "100%", null]}
                                    colorScheme="red"
                                    size="md"
                                    rightIcon={<YoutubeIcon fontSize="xl" />}
                                    boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
                                    _hover={{ transform: "translateY(-2px)", opacity: .85, bgColor: useColorModeValue("red.400", "red.500") }}
                                >
                                    Visit my YouTube
                                </Button>
                            </Link>
                            <Link href="https://github.com/sponsors/bjcarlson42" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} isExternal>
                                <Button
                                    w={["100%", "100%", null]}
                                    colorScheme="gray"
                                    variant="outline"
                                    size="md"
                                    rightIcon={<GitHubIcon fontSize="xl" />}
                                    boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
                                    _hover={{ transform: "translateY(-2px)", bgColor: useColorModeValue("gray.100", "gray.800") }}
                                >
                                    Sponsor me on GitHub
                                </Button>
                            </Link>
                        </Flex>
                    </motion.div>
                </Flex>
                <Box mt={[10, 10, 0]} w={["100%", "100%", "50%"]}>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: 1.6 }}
                    >
                        <AspectRatio ratio={16 / 9}>
                            <iframe src="https://www.youtube.com/embed/uNKBWrkMO_Q" alt="Featured YouTube video" allowFullScreen={true} style={{ borderRadius: 10 }} />
                        </AspectRatio>
                    </motion.div>
                </Box>
            </Flex>
        </Box>
    )
}
Example #12
Source File: image-search.js    From idena-web with MIT License 4 votes vote down vote up
export function ImageSearchDialog({onPick, onClose, onError, ...props}) {
  const {t} = useTranslation()

  const searchInputRef = React.useRef()

  const [current, send] = useMachine(
    Machine({
      context: {
        images: [],
      },
      initial: 'idle',
      states: {
        idle: {},
        searching: {
          invoke: {
            // eslint-disable-next-line no-shadow
            src: (_, {query}) => searchImages(query),
            onDone: {
              target: 'done',
              actions: [
                assign({
                  images: (_, {data}) => data,
                }),
                log(),
              ],
            },
            onError: 'fail',
          },
        },
        done: {
          on: {
            PICK: {
              actions: [
                assign({
                  selectedImage: (_, {image}) => image,
                }),
                log(),
              ],
            },
          },
        },
        fail: {
          entry: [(_, {data: {message}}) => onError(message), log()],
        },
      },
      on: {
        SEARCH: 'searching',
      },
    })
  )

  const {images, selectedImage} = current.context
  const [query, setQuery] = useState()

  return (
    <Dialog
      size="lg"
      initialFocusRef={searchInputRef}
      onClose={onClose}
      {...props}
    >
      <DialogBody d="flex">
        <Stack minH="sm" maxH="sm" spacing={4} flex={1}>
          <Stack
            isInline
            as="form"
            onSubmit={e => {
              e.preventDefault()
              send('SEARCH', {query})
            }}
          >
            <InputGroup w="full">
              <InputLeftElement w={5} h={5} top={1.5} left={3}>
                <SearchIcon boxSize={3} color="gray.200" />
              </InputLeftElement>
              <Input
                ref={searchInputRef}
                type="search"
                id="query"
                placeholder={t('Search the picture on the web')}
                bg="gray.50"
                pl={10}
                value={query}
                onChange={e => setQuery(e.target.value)}
              />
            </InputGroup>
            <PrimaryButton type="submit">Search</PrimaryButton>
          </Stack>
          {eitherState(current, 'idle') && (
            <Flex direction="column" flex={1} align="center" justify="center">
              <Stack spacing={4} align="center" w="3xs">
                <Box p={3}>
                  <SearchIcon boxSize="56px" color="gray.100" />
                </Box>
                <Text color="muted" textAlign="center" w="full">
                  {t(
                    'Type your search in the box above to find images using search box'
                  )}
                </Text>
              </Stack>
            </Flex>
          )}
          {eitherState(current, 'done') && (
            <SimpleGrid
              columns={4}
              spacing={2}
              overflow="auto"
              px={6}
              style={{marginLeft: '-24px', marginRight: '-24px'}}
            >
              {images.map(({thumbnail}) => (
                <AspectRatio
                  ratio={1}
                  w={28}
                  minH={28}
                  bg={thumbnail === selectedImage ? 'blue.032' : 'white'}
                  borderColor={
                    thumbnail === selectedImage ? 'blue.500' : 'gray.50'
                  }
                  borderWidth={1}
                  borderRadius="md"
                  overflow="hidden"
                  position="relative"
                  transition="all 0.6s cubic-bezier(0.16, 1, 0.3, 1)"
                  onClick={() => {
                    send('PICK', {image: thumbnail})
                  }}
                  onDoubleClick={() => {
                    onPick(selectedImage)
                  }}
                >
                  <Image
                    src={thumbnail}
                    objectFit="contain"
                    objectPosition="center"
                    borderColor={
                      thumbnail === selectedImage ? 'blue.500' : 'transparent'
                    }
                    borderWidth={1}
                    borderRadius="md"
                  />
                </AspectRatio>
              ))}
            </SimpleGrid>
          )}
          {eitherState(current, 'searching') && (
            <Flex direction="column" flex={1} align="center" justify="center">
              <Spinner color="blue.500" />
            </Flex>
          )}
        </Stack>
      </DialogBody>
      <DialogFooter>
        <SecondaryButton onClick={onClose}>{t('Cancel')}</SecondaryButton>
        <PrimaryButton
          onClick={() => {
            onPick(selectedImage)
          }}
        >
          {t('Select')}
        </PrimaryButton>
      </DialogFooter>
    </Dialog>
  )
}