@chakra-ui/react#Flex JavaScript Examples
The following examples show how to use
@chakra-ui/react#Flex.
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: Navbar.js From GitMarkonics with MIT License | 6 votes |
function NavHeader() {
return (
<Box className="nav_header" p={1}>
<Flex direction="row " >
<img src={logo} alt="heading" width="100px" className="logo"/>
<Spacer />
<Stack direction="row" spacing={2}>
<Link to="/">
<Button leftIcon={<GrHome />} colorScheme="pink" variant="solid" className="home">
Home
</Button>
</Link>
</Stack>
</Flex>
</Box>
);
}
Example #2
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 #3
Source File: ApplySection.js From interspace.chat with GNU General Public License v3.0 | 6 votes |
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>
);
}
Example #4
Source File: Container.js From benjamincarlson.io with MIT License | 6 votes |
Container = ({ children }) => {
const router = useRouter()
return (
<>
<Link isExternal href="https://github.com/sponsors/bjcarlson42">
<Box bgGradient='linear(to-l, #7928CA, #FF0080)'>
<Flex justify="center" align="center" py={1} color="white">
<GitHubIcon />
<Text ml={2}>Sponsor Me On GitHub!</Text>
</Flex>
</Box>
</Link>
<Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
<Navigation />
<Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
<Flex
as="main"
justifyContent="center"
flexDirection="column"
bg={useColorModeValue("#ffffff", "#15161a")}
color={useColorModeValue("#000000", "#ffffff")}
>
{/* hero outside main Flex to avoid px */}
{router.pathname == '/' && <Hero />}
<Flex px={4} flexDir="column" minH="90vh">
{children}
</Flex>
<Footer />
</Flex>
</>
)
}
Example #5
Source File: index.js From react-sample-projects with MIT License | 6 votes |
export default function NavBar() {
return (
<Box
boxShadow="base"
px={4}
bg="teal.500"
position="fixed"
w="100vw"
zIndex="1"
>
<Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
<RouterLink to={'/'}>
<Avatar size={'sm'} src={logo} alt="demo cart" />
</RouterLink>
<Flex alignItems={'center'}>
<RouterLink to="/product/add">
<Button
variant={'solid'}
colorScheme={'teal'}
size={'sm'}
leftIcon={<MdAdd />}
>
Add
</Button>
</RouterLink>
<CartMenu />
<ColorModeSwitcher justifySelf="flex-end" />
<ProfileMenu />
</Flex>
</Flex>
</Box>
);
}
Example #6
Source File: rent.js From idena-web with MIT License | 6 votes |
function ProviderInfoRow({title, children, ...props}) {
return (
<Flex direction="column" mt={2} {...props}>
<Text fontSize="base" fontWeight={500} color="brandGray.500">
{title}
</Text>
{children}
<Divider mt="10px" />
</Flex>
)
}
Example #7
Source File: Podcast.js From grandcast.fm with Apache License 2.0 | 6 votes |
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>
)
}
Example #8
Source File: Ding.js From blobs.app with MIT License | 6 votes |
Ding = ({ isSelected, activeComp, label, Icon, ...props }) => (
<Button
variant="unstyled"
p="2"
h="auto"
pos="relative"
opacity={isSelected ? 1 : 0.4}
_hover={{ opacity: 1 }}
_focus={{ outline: 'none' }}
{...props}
>
<Flex direction="column" align="center">
<Icon fontSize="2xl" color="gray.600" _dark={{ color: 'gray.300' }} />
<Text fontSize="sm" fontWeight="normal" variant="subtle" mt="2">
{label}
</Text>
<Box
pos="absolute"
bottom="-10px"
w="full"
display="flex"
justifyContent="center"
px="3"
>
{isSelected && activeComp}
</Box>
</Flex>
</Button>
)
Example #9
Source File: BuildCard.jsx From scaffold-directory with MIT License | 6 votes |
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>
);
}
Example #10
Source File: Header.jsx From fastapi-react with MIT License | 6 votes |
Header = () => {
return (
<Flex
as="nav"
align="center"
justify="space-between"
wrap="wrap"
padding="0.5rem"
bg="gray.400"
>
<Flex align="center" mr={5}>
<Heading as="h1" size="sm">Todos</Heading>
<Divider />
</Flex>
</Flex>
);
}
Example #11
Source File: FormData.js From MeowForm with MIT License | 6 votes |
function FormData({obj}) {
let arr = [];
Object.values(obj).forEach(values => (
arr.push(values)
)
)
return (
<div>
<Flex justifyContent="space-between" >
{
arr.map(x=>
<>
<Text margin="5%">
{x}
</Text>
<Spacer/>
</>)
}
</Flex>
<Divider margin="2%" ml="1%" colorScheme="blackAlpha"></Divider>
</div>
);
}
Example #12
Source File: nav-head.js From GitMarkonics with MIT License | 5 votes |
function NavHeader() { return ( < Box className = "nav_header" p = { 1 } > < Flex direction = "row " > < img src = { logo } alt = "heading" width = "80px" / > < Spacer / > < Stack direction = "row" spacing = { 2 } > < Link to = "/login" > < Button leftIcon = { < GrLogin / > } colorScheme = "pink" variant = "solid" > Login < /Button> < / Link > < Link to = "/register" > < Button colorScheme = "white" variant = "outline" > Register < /Button> < / Link > < Link to = "/contactus" > < Button leftIcon = { < GrLogin / > } colorScheme = "blue" variant = "solid" > ContactUs < /Button> < / Link > < /Stack> < / Flex > < /Box> ); } export default NavHeader;
Example #13
Source File: NavTopbar.js From codeursenseine.com with MIT License | 5 votes |
NavTopbar = ({ onNavOpen = () => {}, ...props }) => {
const theme = useTheme();
const data = useStaticQuery(graphql`
query NavTopbarQuery {
site {
siteMetadata {
currentYear
}
}
}
`);
return (
<Flex
as="nav"
display={{ base: "flex", md: "none" }}
background={theme.gradients.brand}
justifyContent="space-between"
color="white"
position="fixed"
top="0"
left="0"
right="0"
zIndex="2"
align="center"
{...props}
>
<Link to={`/${data.site.siteMetadata.currentYear}`}>
<Logo w="4.5" h="2.5rem" pl="2" />
</Link>
<Box textAlign="center">
<Text fontFamily="heading" fontSize="0.6rem">
{theme.data.pretitle}
</Text>
<Heading as="h4" size="xs" fontSize="0.7rem">
{theme.data.title}
</Heading>
</Box>
<IconButton
variant="unstyled"
aria-label="Menu"
d="inline-flex"
icon={<FiMenu />}
size="lg"
onClick={() => onNavOpen()}
/>
</Flex>
);
}
Example #14
Source File: Footer.js From interspace.chat with GNU General Public License v3.0 | 5 votes |
// 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> © 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 #15
Source File: GitHubSponsorCard.js From benjamincarlson.io with MIT License | 5 votes |
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>
)
}
Example #16
Source File: Cart.js From react-sample-projects with MIT License | 5 votes |
Cart = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const cartItems = useSelector(state => state.cart.cartItems);
const viewProductDetails = (e, item) => {
navigate(`/product/${item.id}`);
};
const deleteItem = (e, item) => {
e.stopPropagation();
e.preventDefault();
dispatch(deleteItemFromCart(item));
};
if (cartItems.length === 0) {
return (
<Flex>
<Box
m={4}
w="100%"
fontWeight="semibold"
letterSpacing="wide"
textAlign="center"
>
You cart empty :(
</Box>
</Flex>
);
}
return (
<Box m={3} p={3}>
<Table variant="simple">
<Thead>
<Tr>
<Th>#</Th>
<Th>Image</Th>
<Th>Title</Th>
<Th isNumeric>Price</Th>
<Th isNumeric>Quantity</Th>
<Th>Action</Th>
</Tr>
</Thead>
<Tbody>
{cartItems.map((item, index) => (
<Tr key={item.id} onClick={e => viewProductDetails(e, item)}>
<Td>{index + 1}</Td>
<Td>
<Avatar size={'sm'} src={item.image} alt={item.title} />
</Td>
<Td>{item.title}</Td>
<Td isNumeric>
${parseFloat(item.price * item.quantity).toFixed(2)}
</Td>
<Td isNumeric>{item.quantity}</Td>
<Td>
<Button onClick={e => deleteItem(e, item)}>Delete</Button>
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
);
}
Example #17
Source File: 404.js From idena-web with MIT License | 5 votes |
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>
)
}