@chakra-ui/react#Flex JavaScript Examples

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

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

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

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

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

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

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

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

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

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

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

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;

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

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

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

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

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