@chakra-ui/react#Box JavaScript Examples

export function AdFormField({label, children, maybeError, ...props}) {
  return (
    <FormControl isInvalid={Boolean(maybeError)} {...props}>
      <Flex>
        <FormLabel color="muted" w="32" pt={2}>
          {label}
        </FormLabel>
        <Box w="sm">
          {children}
          <AdFormError>{maybeError}</AdFormError>
        </Box>
      </Flex>
    </FormControl>
  )
}

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

function MobileSettingsItem({title, description, ...props}) {
  return (
    <Box w="100%" {...props}>
      <Flex h={12} w="100%" align="center" justify="space-between">
        <Text fontSize="base" fontWeight={500}>
          {title}
        </Text>
        <Flex align="center">
          {description && (
            <Text fontSize="base" color="muted" mr={2} isTruncated maxW="200px">
              {description}
            </Text>
          )}
          <AngleArrowBackIcon
            stroke="#D8D8D8"
            h={4}
            w={4}
            transform="rotate(180deg)"
          />
        </Flex>
      </Flex>
      <Divider />
    </Box>
  )
}

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

export default function StatBox({ title, desc, url }) {
    const { colorMode } = useColorMode()
    const borderColor = {
        light: '#CBD5E0',
        dark: '#4A5568',
    }
    const [opacity, setOpacity] = useState(0)
    
    return (
        <Link
            href={url}
            isExternal
            _hover={{
                textDecoration: 'none'
            }}
            onMouseOver={() => setOpacity(1)}
            onMouseLeave={() => setOpacity(0)}
        >
            <Box p={2} pb={[2, 1, 1]}>
                <StatGroup border={`1px solid ${borderColor[colorMode]}`} borderRadius={5} p={2} w="100%">
                    <Stat>
                        <Flex
                            align="center"
                            justifyContent="space-between"
                        >
                            <StatLabel>{desc}</StatLabel>
                            <ExternalLinkIcon opacity={opacity} />
                        </Flex>
                        <StatNumber>{title}</StatNumber>
                    </Stat>
                </StatGroup>
            </Box>
        </Link>
    )
}

Output = (file) => {

  // const getMarkdownText = () => {
  //   var rawMarkup = marked("_Nothing_ to show ");
  //   if (file.file) {
  //     rawMarkup = marked(file.file);
  //     // console.log("file is", file);
  //   } else {
  //     rawMarkup = marked("_Nothing_ to show ");
  //   }
  //   return { __html: rawMarkup };
  // };

  return (
    <Box flex="1" bg="white" border="1px" borderColor="gray.10" p={5}>
      <Tabs>
        <TabList>
          <Tab>Output</Tab>

          {/* <Tab>Preview</Tab> */}
        </TabList>

        <TabPanels>
          <TabPanel>
            <Text whiteSpace="pre-line">{file.file}</Text>
          </TabPanel>

          {/* <TabPanel>
            <div dangerouslySetInnerHTML={getMarkdownText()} />
          </TabPanel> */}
          
        </TabPanels>
      </Tabs>
    </Box>
  );
}

MeetupPost = ({ data }) => {
  const { body, frontmatter, parent } = data.mdx;

  return (
    <MeetupLayout title={frontmatter.title}>
      <Stack spacing={8}>
        <A as={Link} to="/meetups">
          Retour à la liste des meetups
        </A>
        <MeetupTitle metadata={frontmatter} />
        <MeetupRegistration metadata={frontmatter} />
        <Box>
          <MDXRenderer>{body}</MDXRenderer>
        </Box>
        <MeetupRegistration metadata={frontmatter} />
        <Button
          variant="outline"
          as="a"
          href={`https://github.com/CodeursEnSeine/codeursenseine-new/edit/master/content/meetups/${parent.base}`}
          leftIcon={<FaGithub />}
        >
          Modifier cette page
        </Button>
      </Stack>
    </MeetupLayout>
  );
}

function Card({ cardTitle, backgroundColor, children, isLoading }) {
    return (
        <VStack borderRadius="10px" borderStyle="solid" borderColor="whatsapp.500" borderWidth="1px" width="100%" alignItems="flex-start">
            <Box backgroundColor={backgroundColor} width="100%" borderBottomWidth="1px" borderColor="whatsapp.500" px="20px" py="20px">
                <Skeleton isLoaded={!isLoading}>
                    <Heading fontSize="16px">
                        {cardTitle}
                    </Heading>
                </Skeleton>
                
            </Box>
            <VStack alignItems="flex-start" px="20px" py="20px" width="100%">
                {children}
            </VStack>
        </VStack>
    );
}

Card = forwardRef(({ isLink, variant, ...props }, ref) => {
  const theme = useTheme();

  const primary = {
    background: theme.gradients.brand,
    color: "white",
  };

  return (
    <Box
      ref={ref}
      position="relative"
      d="flex"
      flexDirection="column"
      p={6}
      borderRadius="md"
      boxShadow="brand"
      border="1px solid transparent"
      overflow="hidden"
      _hover={
        isLink
          ? {
              borderColor: "brand.600",
              cursor: "pointer",
            }
          : {}
      }
      _focus={
        isLink
          ? {
              borderColor: "brand.600",
            }
          : {}
      }
      {...(variant === "primary" ? primary : {})}
      {...props}
    />
  );
})

function Card({ cardTitle, backgroundColor, children, isLoading }) {
  return (
    <VStack
      borderRadius="10px"
      borderStyle="solid"
      borderColor="blue"
      borderWidth="1px"
      width="100%"
      alignItems="flex-start"
    >
      <Box
        backgroundColor={backgroundColor}
        width="100%"
        borderBottomWidth="1px"
        borderColor="blue"
        px="15px"
        py="15px"
      >
        <Skeleton isLoaded={!isLoading}>
          <Heading fontSize="16px">
            {" "}
            <img src={ChainlinkLogo} width="90px" />
          </Heading>
        </Skeleton>
      </Box>
      <VStack alignItems="flex-start" px="20px" py="20px" width="100%">
        {children}
      </VStack>
    </VStack>
  );
}

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

export function ChangeLanguageDrawer({changeLanguageDisclosure, ...props}) {
  const {t, i18n} = useTranslation()
  const {setLanguage} = useSettingsDispatch()
  const {lng} = useLanguage()

  return (
    <Drawer {...changeLanguageDisclosure} isCloseable={false} {...props}>
      <DrawerHeader>
        <AngleArrowBackIcon
          stroke="#578FFF"
          display={['block', 'none']}
          position="absolute"
          left={4}
          top={4}
          h="28px"
          w="28px"
          onClick={() => changeLanguageDisclosure.onClose()}
        />
        <PageTitleNew>{t('Language')}</PageTitleNew>
      </DrawerHeader>
      <DrawerBody>
        <Stack spacing={0}>
          {AVAILABLE_LANGS.map(lang => (
            <Box
              key={lang}
              borderBottom="1px solid"
              borderBottomColor="gray.100"
              py={3}
              onClick={() => {
                i18n.changeLanguage(lang)
                setLanguage(lang)
              }}
            >
              <Flex justifyContent="space-between" align="center">
                <Text>
                  {isoLangs[lang].nativeName} ({lang.toUpperCase()})
                </Text>
                {lang === lng && (
                  <CheckIcon boxSize={4} mr={2} color="blue.500" />
                )}
              </Flex>
            </Box>
          ))}
        </Stack>
      </DrawerBody>
    </Drawer>
  )
}

function App() {
	const [isMember, setIsMember] = useState(false);

	return (
		<>
			<Router>
				<Header isMember={isMember} setIsMember={setIsMember} />
				<Box pt='60px'>
					<Switch>
						{isMember ? (
							<div>
								<CustomRoute isMember={isMember} exact path='/'>
									<ClaimsPage />
								</CustomRoute>
								<CustomRoute
									isMember={isMember}
									exact
									path='/voting/:id'>
									<VotingPage />
								</CustomRoute>
								<CustomRoute
									isMember={isMember}
									exact
									path='/profile'>
									<Profile />
								</CustomRoute>
								<CustomRoute
									isMember={isMember}
									exact
									path='/makeclaim'>
									<MakeClaim />
								</CustomRoute>{" "}
								<CustomRoute
									isMember={isMember}
									exact
									path='/activity'>
									<ActivityPage />
								</CustomRoute>
							</div>
						) : (
							<Route>
								<BecomeMember />
							</Route>
						)}
					</Switch>
				</Box>
			</Router>
		</>
	);
}

export function FlipStepHeader(props) {
  return <Box mb={6} {...props} />
}

Live = () => {
  if (process.env.GATSBY_ARCHIVE) {
    return <RedirectCodeursEnSeine path="/live" />;
  }

  const isBrowser = typeof window !== "undefined";

  return (
    <Layout theme="ces">
      <Seo
        title="Live"
        meta={[
          {
            property: `og:image`,
            content: `${process.env.GATSBY_ORIGIN}/images/ces/social.jpg`,
          },
        ]}
      />
      <Box>
        <Stack spacing={6}>
          <Heading as="h1" mb={6}>
            Live Twitch
          </Heading>
        </Stack>
        {isBrowser && (
          <>
            <TwitchPlayer
              channel="codeursenseine"
              id="codeursenseine"
              width="100%"
            />
            <TwitchChat
              channel="codeursenseine"
              id="codeursenseine-chat"
              theme="light"
              width="100%"
            />
          </>
        )}
      </Box>
    </Layout>
  );
}

export function VotingOptionInput({
  isLast,
  isDisabled,
  onAddOption,
  onRemoveOption,
  ...props
}) {
  return (
    <React.Fragment>
      <Flex align="center" justify="space-between">
        <Stack isInline spacing={1} flex={1} py={1}>
          <Flex h={6} w={6} align="center" justify="center">
            <Box bg="muted" borderRadius="full" h={1} w={1} />
          </Flex>
          <Input
            border="none"
            px={0}
            h="auto"
            _focus={{border: 'none', outline: 'none'}}
            _placeholder={{
              color: 'muted',
            }}
            onFocus={() => {
              if (isLast) onAddOption()
            }}
            {...props}
          />
        </Stack>
        <IconButton
          icon={<CrossSmallIcon boxSize={4} />}
          isDisabled={isDisabled}
          bg="unset"
          color="muted"
          fontSize={20}
          w={5}
          minW={5}
          h={5}
          p={0}
          _hover={{
            bg: 'gray.50',
          }}
          _focus={{
            bg: 'gray.50',
          }}
          onClick={onRemoveOption}
        />
      </Flex>
      {!isLast && <Divider borderBottomColor="gray.100" mx={-1} />}
    </React.Fragment>
  )
}

Layout = ({ children, theme = "ces" }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <ChakraProvider theme={themes[theme]}>
      <Flex
        minH="100vh"
        maxW="100vw"
        background="white"
        color="brand.900"
        style={{
          minHeight: "calc(var(--vh, 1vh) * 100)",
        }}
      >
        <Nav
          isOpen={isOpen}
          maxW="100vw"
          w={{ base: "100%", [navBreakpoint]: navDesktopWidth }}
          breakpoint={navBreakpoint}
          onNavClose={onClose}
        />
        <NavTopbar maxW="100vw" h={navTopbarHeight} onNavOpen={onOpen} />
        <Box
          as="main"
          ml={{ [navBreakpoint]: navDesktopWidth }}
          mt={{ base: navTopbarHeight, [navBreakpoint]: "0" }}
          width="100%"
          position="relative"
          zIndex="1"
        >
          <Box
            maxWidth="60rem"
            width="100%"
            overflow="auto"
            marginX="auto"
            p={6}
            pb={16}
          >
            <PageHeader />
            <Mdx>{children}</Mdx>
          </Box>
        </Box>
      </Flex>
    </ChakraProvider>
  );
}

export function FlipCardImageBox({children, ...props}) {
  return (
    <AspectRatio h={150} w={150} position="relative" {...props}>
      <Box>{children}</Box>
    </AspectRatio>
  )
}

function App() {
  const curURL = useRef(null);
  let host = curURL ?? curURL.current;

  useEffect(() => {
    if (typeof window !== "undefined") {
      const getHostname = () => {
        if (typeof window !== "undefined") {
          curURL.current = window.location.origin;
          console.log(window.location);
          // return host;
          return null;
        }
      };
      getHostname();
    }
  }, [curURL]);
  // TODO: Need to give the option to turn off animations but not sure how to do it yet ?
  // const [toggleAnim, setToggleAnim] = useState(false)

  return (
    <div
      className="App"
    >
        <HeadComponent url={host} img={`${host}${SocialImg}`} />
        <SiteHeader />
        <Box
          sx={{
            scrollSnapType: { base: "y proximity", md: "unset" },
            d: 'block',
            position: "relative",
            width: '100%',
            height: 'auto',
            overflowX: "hidden",
            zIndex: 2,
            m: 0,
            p: 0,
            section: {
              scrollSnapAlign: { base: "start" },
              scrollSnapStop: { base: "smooth" },
            },
          }}
        >
          {/* <Suspense fallback={<Loader />}> */}
            <Canvas />
          {/* </Suspense> */}

          <HomeSection />
          <ScheduleSection />
          <WorkshopsSection />
          <SpeakersSection />
          <MetaverseSection />
          <ChatSection />
          <ApplySection />
          <EasterEgg />
          <AlphaNotice />
          {/* TODO: Need to figure out how to stop the animations, in gsap & three's `tick()` */}
          {/* <Button
          position="fixed"
          bottom={20}
          left={6}
          colorScheme="pink"
          transition="all 0.3s 0.8s ease"
          onClick={setToggleAnim}
          zIndex={2002}
          >
          Turn off animations
        </Button> */}

          <SiteFooter />
        </Box>
    </div>
  );
}

function VotingResultBar({
  label,
  value,
  max,
  isMine,
  isWinner,
  votesCount,
  didVote,
  ...props
}) {
  const percentage = value / max

  return (
    <Flex
      align="center"
      justify="space-between"
      textTransform="capitalize"
      position="relative"
      px={2}
      h={6}
      w="full"
      {...props}
    >
      <Box
        borderRadius="md"
        bg={isWinner ? 'blue.012' : 'gray.50'}
        h={6}
        width={percentage > 0 ? `${percentage * 100}%` : 2}
        position="absolute"
        left={0}
        top={0}
        bottom={0}
        zIndex="base"
      />
      <Stack isInline spacing={2} align="center" zIndex={1}>
        {didVote && (
          <Flex
            align="center"
            justify="center"
            bg={isMine ? 'brandBlue.500' : 'transparent'}
            borderRadius="full"
            borderWidth={isMine ? 0 : '4px'}
            borderColor="gray.100"
            color="white"
            w={4}
            h={4}
          >
            {isMine && <OkIcon boxSize={3} />}
          </Flex>
        )}
        <Text isTruncated maxW="sm" title={label.length > 50 ? label : ''}>
          {label}
        </Text>
      </Stack>
      <Text fontWeight={500} textTransform="initial" zIndex={1}>
        {votesCount === 0
          ? toPercent(0)
          : toPercent(value / Number(votesCount))}{' '}
        ({value})
      </Text>
    </Flex>
  )
}

AlphaNotice = () => {
  const [toggle, setToggle] = useState(true);
  const ref = useRef(null);
  return (
    <Box
      ref={ref}
      // display="none"
      bg="linear-gradient(90.24deg, #640DFB80 0.3%, rgba(100, 13, 251, 0.1) 80.16%)"
      backdropFilter="blur(7px)"
      boxShadow="0 0 15px rgba(0,0,0,0.6)"
      color="#FF61E6"
      position="fixed"
      bottom={0}
      left={0}
      right={0}
      width="100%"
      textAlign="center"
      height="auto"
      opacity={toggle ? 1 : 0}
      transform={`translateY(${toggle ? 0 : 100}px)`}
      transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.3s ease-in-out"
      zIndex={3000}
    >
      <Box
        d="flex"
        position="relative"
        alignItems="center"
        justifyContent="space-around"
        flexFlow="row nowrap"
        mx="auto"
        maxW={{base: '75%', md: '66%', '2xl': "6xl"}}
        px={{base: 5, lg: 3}}
        py={3}
      >
        {/* <Image src={BabyOctoGif} boxSize="25px" objectFit="cover" /> */}
        <Text fontSize={{base: "2vmin", lg: '0.7vmax'}} fontWeight={700}>
          The site is in{" "}
          <Text as="span" color="#76EBF2" fontWeight="700">
            Alpha
          </Text>
          .{" "}
          <span role="img" aria-label="watchful eyes">
            ?
          </span>{" "}
          We're still working on content, there's no Web3 connectivity and there
          are some bugs. <br /> We're working to get it
          all ship shape for June!
        </Text>
        {/* <Image src={BabyOctoGif} boxSize="35px" objectFit="cover" /> */}
        <IconButton
          onClick={() => setToggle(!toggle)}
          colorScheme="ghost"
          color="#927CFF"
          pos="fixed"
          bottom={3}
          right={{base: 2, lg: 6}}
          size="sm"
          aria-label="Close easter egg"
          icon={<CloseIcon />}
          zIndex={2001}
        />
      </Box>
    </Box>
  );
}

export function FormSection(props) {
  return <Box {...props} />
}

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

function SettingsLayout({title, children}) {
  const router = useRouter()
  const {t} = useTranslation()

  return (
    <Layout canRedirect={false}>
      <Page alignItems="normal">
        <Box position="relative">
          {router.pathname.match(/\/settings\/(.)+/) ? (
            <AngleArrowBackIcon
              display={['block', 'none']}
              stroke="#578FFF"
              position="absolute"
              left={-4}
              top={-2}
              h="28px"
              w="28px"
              onClick={() => {
                router.push('/settings')
              }}
            />
          ) : (
            <MobileApiStatus top={-2} left={-4} />
          )}
          <PageTitleNew mt={-2}>{title}</PageTitleNew>
          <Stack spacing={2} isInline display={['none', 'block']}>
            <Button
              variant="tab"
              onClick={() => router.push('/settings')}
              isActive={router.pathname === '/settings'}
            >
              {t('General')}
            </Button>
            <Button
              variant="tab"
              onClick={() => router.push('/settings/node')}
              isActive={router.pathname === '/settings/node'}
            >
              {t('Node')}
            </Button>
            <Button
              variant="tab"
              onClick={() => router.push('/settings/affiliate')}
              isActive={router.pathname === '/settings/affiliate'}
            >
              {t('Affiliate program')}
            </Button>
          </Stack>
        </Box>
        {children}
      </Page>
    </Layout>
  )
}

Loader = () => {
  return <Box>Loading...</Box>;
}

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

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

TechStack = () => {
    const { colorMode } = useColorMode()

    const colorSecondary = {
        light: 'gray.600',
        dark: 'gray.400'
    }

    const linkColor = {
        light: 'blue.400',
        dark: 'blue.600'
    }

    return (
        <Box as="section" w="100%" mt={10} mb={20}>
            <Heading letterSpacing="tight" size="lg" fontWeight={700} as="h2" mb={4}>
                Tech Stack ⚙️
            </Heading>
            <Text color={colorSecondary[colorMode]} mb={4}>Each piece of technology used in this website is carefully thought out. I believe this is one of the best stacks there is to build websites of any size and domain.</Text>
            <Box flexDir="column" overflowX="auto">
                <Table variant="simple">
                    <Thead>
                        <Tr>
                            <Th>Type</Th>
                            <Th>Name</Th>
                            <Th>Route</Th>
                            <Th>Description</Th>
                        </Tr>
                    </Thead>
                    <Tbody>
                        <Tr>
                            <Td>JS Framework</Td>
                            <Td><Link href="https://nextjs.org" color={linkColor[colorMode]} isExternal>Next JS</Link></Td>
                            <Td>n/a</Td>
                            <Td>Next.js was an easy choice given its large community and ability for rapid development.</Td>
                        </Tr>
                        <Tr>
                            <Td>CSS Framework</Td>
                            <Td><Link href="https://chakra-ui.com" color={linkColor[colorMode]} isExternal>Chakra UI</Link></Td>
                            <Td>n/a</Td>
                            <Td>I use Chakra UI because its components make a beautiful UI out of the box and are highly customizable.</Td>
                        </Tr>
                        <Tr>
                            <Td>Blog</Td>
                            <Td><Code>next-mdx-remote</Code></Td>
                            <Td>/blog/[slug].js</Td>
                            <Td>I use <Link href="https://github.com/hashicorp/next-mdx-remote" color={linkColor[colorMode]} isExternal>next-mdx-remote</Link> for my blog. Posts are stored in <Code>mdx</Code> files and pre-rendered.</Td>
                        </Tr>
                        <Tr>
                            <Td>Real-Time Statistics</Td>
                            <Td>Next.js api routes</Td>
                            <Td>/api/[].js</Td>
                            <Td>Multiple api routes that interact with the GitHub, YouTube, and Strava api to fetch my real-time social media data using Next.JS <Link href="https://nextjs.org/docs/api-routes/introduction" color={linkColor[colorMode]} isExternal>serverless functions</Link>.</Td>
                        </Tr>
                        <Tr>
                            <Td>Realtime Blog Post View/Like Count</Td>
                            <Td>Firebase Realtime Db</Td>
                            <Td>/api</Td>
                            <Td>I use <Link href="https://firebase.google.com" color={linkColor[colorMode]} isExternal>Google's Firebase</Link> to store view and like counts for my blog posts.</Td>
                        </Tr>
                        <Tr>
                            <Td>Deployment</Td>
                            <Td>Vercel</Td>
                            <Td>n/a</Td>
                            <Td>I use <Link href="https://vercel.com" color={linkColor[colorMode]} isExternal>Vercel</Link> to deploy my app. It's free, fast, integrates with GitHub, and overall a great experience.</Td>
                        </Tr>
                        <Tr>
                            <Td>Domain</Td>
                            <Td>Namecheap</Td>
                            <Td>n/a</Td>
                            <Td>My domain name is bought and stored through <Link color="blue.500" href="https://www.namecheap.com/" isExternal>Namecheap</Link>.</Td>
                        </Tr>
                    </Tbody>
                </Table>
            </Box>
        </Box>
    )
}

function TransactionMenu({tx}) {
  const {t} = useTranslation()
  const failToast = useFailToast()
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const menuRef = useRef()
  const deleteModalDisclosure = useDisclosure()

  const [, {deleteVote, sendVote}] = useDeferredVotes()

  const del = async () => {
    try {
      await deleteVote(tx.id)
    } catch (e) {
      failToast(e.message)
    }
  }

  const send = async () => {
    try {
      await sendVote(tx)
    } catch (e) {
      failToast(e.message)
    }
  }

  useClickOutside(menuRef, () => {
    setIsMenuOpen(false)
  })

  return (
    <Box ml="auto" cursor="pointer" w={3} position="relative">
      <MoreIcon boxSize={5} onClick={() => setIsMenuOpen(true)} />
      {isMenuOpen && (
        <Box position="absolute" top={6} right={0} zIndex={2}>
          <WalletMenu ref={menuRef}>
            <WalletMenuItem
              color="blue.500"
              onClick={async () => {
                setIsMenuOpen(false)
                send(tx)
              }}
              icon={<SendOutIcon color="blue.500" />}
            >
              {t('Send now')}
            </WalletMenuItem>
            <WalletMenuItem
              color="red.500"
              onClick={async () => {
                setIsMenuOpen(false)
                deleteModalDisclosure.onOpen()
              }}
              icon={<BasketIcon color="red.500" />}
            >
              {t('Delete')}
            </WalletMenuItem>
          </WalletMenu>
        </Box>
      )}
      <PendingTxRemoveModal {...deleteModalDisclosure} onSubmit={del} />
    </Box>
  )
}