@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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
ElementFlipImage = ScrollElement(AspectRatio)
Example #9
| Source File: SponsorCard.js From codeursenseine.com with MIT License | 4 votes |
|
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 |
|
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 |
|
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 |
|
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>
)
}
