@chakra-ui/react#Flex TypeScript Examples

export default function HeroSection() {
  return (
    <>
      <Flex h={"55vh"} justifyContent="center" align="center">
        <SlideFade in={true} offsetY="50vh">
          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
            <Heading
              fontWeight={600}
              fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
              lineHeight={"110%"}
            >
              <Text textShadow="1px 1px #9c1786">Make notes for </Text>
              <Text
                as={"span"}
                color={"green.400"}
                bgGradient="linear(to-r, green.200, pink.500)"
                bgClip="text"
              >
                your daily work
              </Text>
            </Heading>
          </motion.div>
        </SlideFade>
      </Flex>
    </>
  );
}

DropZone = ({ text, isDragging = false, isLoaded = false, loadedText = null }: DropZoneProps): JSX.Element => {
    const dragColor = getColor(isLoaded, isDragging);
    const dragFontSize = isDragging ? 'lg' : 'md';
    const dragIconSize = isDragging ? 36 : 28;
    return (
        <Box
            borderRadius='3xl'
            borderWidth='1px'
            minHeight='100px'
            border='dashed'
            borderColor={dragColor}
            pl={5}
            pr={5}
        >
            <Center height='100%'>
                <Flex flexDirection="row" justifyContent="center" alignItems='center'>
                    <Box transition='all 2s ease'>
                        {/* The key is required for the color to change */}
                        <RiDragDropLine key={dragColor} size={dragIconSize} color={dragColor} />
                    </Box>
                    
                    <Text
                        ml={3}
                        color={dragColor}
                        transition='all .2s ease'
                        fontSize={dragFontSize}
                        textAlign='center'
                    >
                        {isLoaded && !isDragging ? loadedText : text}
                    </Text>
                </Flex>
            </Center>
        </Box>
    );
}

export default function Home() {
  return (
    <Content>
      <Flex direction="column" justify="center" marginLeft="30%">
        <Center>
          <Image
            src="../icons/dragon.png"
            width="50%"
            opacity="50%"
            filter="grayscale(100%)"
            draggable="false"
          />
        </Center>
        <Center mt="10" opacity="75%">
          Click{" "}
          <Badge mx="1" variant="outline" colorScheme="orange">
            New Tunnel
          </Badge>{" "}
          to add a new tunnel
        </Center>
        <Center mt="4" opacity="75%">
          Click an existing tunnel to toggle
        </Center>
      </Flex>
    </Content>
  );
}

export function OnlineBadger(){
  return(
    <Flex align="center" justify="center">
    <HiStatusOnline color="green"/>
      <Text color="green.400" ml="2">
        You are online!
      </Text>
    </Flex>
  )
}

CourseRating = (props: CustomerReviewsProps) => {
  const { rating, reviewCount, ...stackProps } = props
  if(!reviewCount || !rating) return (
    <Text fontSize="sm" fontWeight="medium" color={useColorModeValue('gray.600', 'gray.300')}>
     Not enough rating
    </Text>
  )
  return (
    <HStack spacing="1" {...stackProps}>
      <Badge colorScheme="orange" variant="solid" px="2" rounded="full">
        {rating}
      </Badge>
      {length && reviewCount && (
        <>
          <Flex align="center">
            {Array.from({length: +rating!}).map((_, index) => (
              <Icon key={index} as={HiStar} color="orange.500"/>
            ))}
          </Flex>
          <Text fontSize="sm" fontWeight="medium" color={useColorModeValue('gray.600', 'gray.300')}>
            ({reviewCount})
          </Text>
        </>
      )}
    </HStack>
  )
}

TimelineItem: React.FC<TimelineItemProps> = ({
  icon = FiCheckCircle,
  boxProps = {},
  skipTrail = false,
  children,
  ...props
}) => {
  const color = useColorModeValue("gray.700", "gray.500");
  return (
    <Flex minH={20} {...props}>
      <Flex flexDir="column" alignItems="center" mr={4} pos="relative">
        <Circle
          size={12}
          bg={useColorModeValue("gray.600", "gray.500")}
          opacity={useColorModeValue(0.07, 0.15)}
          sx={{}}
        />
        <Box
          as={icon}
          size="1.25rem"
          color={color}
          pos="absolute"
          left="0.875rem"
          top="0.875rem"
        />
        {!skipTrail && <Box w="1px" flex={1} bg={color} my={1} />}
      </Flex>
      <Box pt={3} {...boxProps}>
        {children}
      </Box>
    </Flex>
  );
}

AdvancedSettings: React.FunctionComponent<AdvancedSettingsProps> = (
	props: React.PropsWithChildren<AdvancedSettingsProps>
) => {
	const itemState = useState(props.itemStateProp);

	const getAdvancedView = (
		item: State<JSONSchema7>
	): JSX.Element | undefined => {
		switch (itemState.type.value) {
			case "string":
				return <AdvancedString itemStateProp={item} />;
			case "number":
			case "integer":
				return <AdvancedNumber itemStateProp={item} />;
			case "boolean":
				return <AdvancedBoolean itemStateProp={item} />;
			default:
				return undefined;
		}
	};

	return <Flex>{getAdvancedView(itemState)}</Flex>;
}

Center = ({ children, expand, ...others }: CenterProps) => {
  if (expand) {
    others.height = "100%";
    others.width = "100%";
  }

  return (
    <Flex justifyContent="center" alignItems="center" {...others}>
      {children}
    </Flex>
  );
}

getDefaultMapLayout = (mapHeight: number): LayoutComponent<SlotElements<'map' | 'filters'>> =>
  makeSlots<'map' | 'filters'>((slotElements) => (
    <Flex height={mapHeight}>
      <Box position="relative" flex={1}>
        {slotElements.map}
      </Box>
      <Box width="300px" marginLeft="5px" height={mapHeight} overflowY="auto">
        {slotElements.filters}
      </Box>
    </Flex>
  ))

OperationPath = ({ name, op, selectedPath }) => {
  const path = parseOperation(op);
  const type = path[0];
  const items = path.slice(1, path.length);
  const colors = {
    [OperationTypes.OBSERVE]: "green",
    [OperationTypes.GET]: "teal",
    [OperationTypes.UPDATE]: "purple.600",
  };

  const current = parseOperation(op);
  current.shift();
  const isSelected = selectedPath === current.join(".");
  return (
    <Flex bg={isSelected && "purple.200"} p="2" w="full">
      <Text>{name} =&nbsp;</Text>
      <Text fontWeight="bold" color={colors[type]}>
        {type && type.toLowerCase()}
      </Text>
      <Text>.{items.join(".")}</Text>
    </Flex>
  );
}

SexSelector = ({ config, setHustlerConfig }: ConfigureHustlerProps) => (
  <div>
    <Header>
      <h4>Sex</h4>
    </Header>
    <RadioGroup
      borderBottom="1px solid #EFEFEF"
      paddingBottom="16px"
      onChange={value => setHustlerConfig({ ...config, sex: value as HustlerSex })}
      value={config.sex}
      color="blackAlpha.900"
    >
      <Flex justifyContent="flex-start" gap="32px">
        <Radio fontSize="14px !important" value="male">
          Male
        </Radio>
        <Radio fontSize="14px !important" value="female">
          Female
        </Radio>
      </Flex>
    </RadioGroup>
  </div>
)

AccessDeniedIndicator: FC<IProps> = ({
  message = "You need to Sign In to view this content!",
}) => {
  const iconNode = () => {
    return <WarningTwoIcon color="purple" boxSize="50px" />;
  };

  const signInButtonNode = () => {
    return (
      <Link href="/api/auth/signin">
        <Button
          onClick={(e) => {
            e.preventDefault();
            signIn();
          }}
        >
          {message}
        </Button>
      </Link>
    );
  };

  return (
    <Flex justifyContent="center" alignItems="center" h="200px">
      <Stack spacing={4} align="center">
        <Box>{iconNode()}</Box>
        <Box>{signInButtonNode()}</Box>
      </Stack>
    </Flex>
  );
}

export default function Layout({ children }: Props) {
    return (
        <Flex
            flexDirection="column"
            alignItems="center"
            justifyContent="center"
            h="100vh"
            bg="white"
        >
            {children}
        </Flex>
    )
}

IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => {
  const toast = useToast();
  const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();

  return (
    <Button
      variant="ghost"
      borderWidth="1px"
      rounded="lg"
      padding={2}
      height={32}
      position="relative"
      whiteSpace="normal"
      onClick={event => {
        const src = iconsRef.current[name].outerHTML ?? svg
        if (event.shiftKey) {
          copy(src);
          toast({
            title: 'Copied!',
            description: `Icon "${name}" copied to clipboard.`,
            status: 'success',
            duration: 1500,
          });
        }
        if (event.altKey) {
          download(src, `${name}.\svg`, 'image/svg+xml');
        }
        if (onClick) {
          onClick(event);
        }
      }}
      key={name}
      alignItems="center"
    >
      <Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
        <Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
          <IconWrapper
            content={content}
            stroke={color}
            strokeWidth={strokeWidth}
            height={size}
            width={size}
            ref={iconEl => (iconsRef.current[name] = iconEl)}
          />
        </Flex>
        <Flex flex={1} minHeight={10} align="center">
          <Text wordBreak="break-word" maxWidth="100%">
            {name}
          </Text>
        </Flex>
      </Flex>
    </Button>
  );
}

export function Container(props: ContainerProps) {
  const { colorMode } = useColorMode()

  return (
    <Flex
      direction="column"
      alignItems="center"
      justifyContent="flex-start"
      bg={bgColor[colorMode]}
      color={textColor[colorMode]}
      {...props}
    />
  )
}

UserListItem = ({ id, username, onEdit, onDelete }: IProps) => {
  return (
    <Flex
      direction="row"
      align="center"
      justify="space-between"
      py={2}
      width="100%"
    >
      <HStack spacing={8} align="center">
        <Text>#{id}</Text>
        <Text>{username}</Text>
      </HStack>
      <ButtonGroup spacing={2}>
        <IconButton
          aria-label="Edit"
          icon={<EditIcon color="white" />}
          colorScheme="blue"
          onClick={() => onEdit(id)}
          size="sm"
        />
        <IconButton
          aria-label="Delete"
          icon={<DeleteIcon color="white" />}
          colorScheme="red"
          onClick={() => onDelete(id)}
          size="sm"
        />
      </ButtonGroup>
    </Flex>
  )
}

App = () => {
  useShortcuts()

  return (
    <>
      <Global
        styles={() => ({
          html: { minWidth: '860px', backgroundColor: '#1a202c' },
        })}
      />
      <Metadata />
      <Header />
      <DndProvider backend={Backend}>
        <Flex h="calc(100vh - 3rem)">
          <Sidebar />
          <EditorErrorBoundary>
            <Box bg="white" flex={1} position="relative">
              <Editor />
            </Box>
          </EditorErrorBoundary>

          <Box
            maxH="calc(100vh - 3rem)"
            flex="0 0 15rem"
            bg="#f7fafc"
            overflowY="auto"
            overflowX="visible"
            borderLeft="1px solid #cad5de"
          >
            <InspectorProvider>
              <Inspector />
            </InspectorProvider>
          </Box>
        </Flex>
      </DndProvider>
    </>
  )
}

SocialLinks: FunctionComponent = () => {
    return (
        <Flex
            align="center"
            wrap="wrap"
            justify="center"
            mx={["auto", null, "initial"]}
            p={2}
        >
            <SocialLink icon={FaTwitter} href={twitterUrl} />
            <SocialLink icon={FaYoutube} href={youtubeUrl} />
            <SocialLink icon={FaFacebookF} href={facebookUrl} />
            <SocialLink icon={FaGithub} href={githubUrl} />
        </Flex>
    );
}

ChatMessageView: React.FC<Props> = (props) => {
  const { track, message, pinned, showAdminActions } = props;
  const [showMenuButton, setShowMenuButton] = React.useState(false);
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  const hasSpotlight = React.useMemo(() => isMessageSpotlighted(message, track.spotlights), [track.spotlights]);

  return (
    <Flex
      w="100%"
      direction="row"
      alignItems="flex-start"
      bg={pinned ? Colors.baseLight : message.sender.isAdmin ? "#ffffff" : Colors.backgroundColor}
      py={pinned ? "10px" : "4px"}
      px="15px"
      onMouseEnter={() => setShowMenuButton(true)}
      onMouseLeave={() => setShowMenuButton(false)}
      onTouchEnd={(e) => {
        e.preventDefault();
        setShowMenuButton(!!showMenuButton);
      }}
    >
      <ChatMessageAvatar author={message.sender} />
      <Box ml="8px" flexGrow={1} flexShrink={0} flexBasis={0}>
        <ChatMessageAuthor author={message.sender} pinned={pinned} highlight={hasSpotlight} />
        <Text p={0} m={0} ml={1} fontSize="sm" as="span">
          {React.useMemo(
            () => (message.redacted ? <i>[message removed]</i> : <ChatMessageText content={message.content || ""} />),
            [message.redacted, message.content],
          )}
        </Text>
      </Box>
      {(showAdminActions && showMenuButton) || isMenuOpen ? (
        <ChatMessageMenu {...props} onOpen={() => setIsMenuOpen(true)} onClose={() => setIsMenuOpen(false)} />
      ) : null}
    </Flex>
  );
}

function FoodInfo({
  food,

  fontSize,
  nameNoOfLines,
  energy,
  notes,
  children,
  canBeLink = false,
  ...rest
}: Props) {
  return (
    <Flex height="100%" align="center" {...rest}>
      <Box>
        {food.url && canBeLink ? (
          <Link target="_blank" href={food.url} color="teal.500">
            {food.name}
          </Link>
        ) : (
          <Text noOfLines={nameNoOfLines} color="gray.800">
            {food.name}
          </Text>
        )}

        {energy !== undefined && (
          <Text fontSize="sm" textColor="gray.500">
            <Text as="span" fontWeight="medium">
              {`${Math.round(energy as number)}kcal`}
            </Text>{' '}
            / {food.servingSizeInGrams || DEFAULT_SERVING_SIZE_IN_GRAMS}g
          </Text>
        )}

        {children}
      </Box>
    </Flex>
  )
}

LocalPortField = ({ helpText }: LocalPortFieldProps): JSX.Element => {
    const dispatch = useAppDispatch();

    const port: number = useAppSelector(state => state.config.socket_port) ?? 1234;
    const [newPort, setNewPort] = useState(port);
    const [portError, setPortError] = useState('');
    const hasPortError: boolean = (portError?? '').length > 0;

    useEffect(() => { setNewPort(port); }, [port]);

    /**
     * A handler & validator for saving a new port.
     *
     * @param theNewPort - The new port to save
     */
    const savePort = (theNewPort: number): void => {
        // Validate the port
        if (theNewPort < 1024 || theNewPort > 65635) {
            setPortError('Port must be between 1,024 and 65,635');
            return;
        } else if (theNewPort === port) {
            setPortError('You have not changed the port since your last save!');
            return;
        }

        dispatch(setConfig({ name: 'socket_port', value: theNewPort }));
        if (hasPortError) setPortError('');
        showSuccessToast({
            id: 'settings',
            duration: 4000,
            description: 'Successfully saved new port! Restarting Proxy & HTTP services...'
        });
    };

    return (
        <FormControl isInvalid={hasPortError}>
            <FormLabel htmlFor='socket_port'>Local Port</FormLabel>
            <Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
                <Input
                    id='socket_port'
                    type='number'
                    maxWidth="5em"
                    value={newPort}
                    onChange={(e) => {
                        if (hasPortError) setPortError('');
                        setNewPort(Number.parseInt(e.target.value));
                    }}
                />
                <IconButton
                    ml={3}
                    verticalAlign='top'
                    aria-label='Save port'
                    icon={<AiOutlineSave />}
                    onClick={() => savePort(newPort)}
                />
            </Flex>
            {!hasPortError ? (
                <FormHelperText>
                    {helpText ?? 'Enter the local port for the socket server to run on'}
                </FormHelperText>
            ) : (
                <FormErrorMessage>{portError}</FormErrorMessage>
            )}
        </FormControl>
    );
}

export default function SidebarItem({
  name,
  address,
  lastConnectAt,
  active,
  selected,
}: SideBarParams) {
  return (
    <ContextMenuTrigger
      menuId={`menu-${name}`}
      passData={{
        name,
      }}
    >
      <Flex
        bg={selected ? "whiteAlpha.100" : ""}
        align="center"
        cursor="pointer"
        w="100%"
        p="4"
        transition=".3s ease"
        _hover={{ background: "whiteAlpha.200" }}
      >
        <Box
          bg={active ? "green.400" : "whiteAlpha.600"}
          w="10px"
          h="10px"
          borderRadius="50%"
        />
        <Flex direction="column" ml="2" w="89%">
          <Text
            color="whiteAlpha.700"
            w="100%"
            whiteSpace="nowrap"
            overflow="hidden"
            textOverflow="ellipsis"
          >
            {name}
          </Text>
          <Flex color="whiteAlpha.600" justify="space-between">
            {address && <Text fontSize="xs">{address[0]}</Text>}
            <Text fontSize="xs">
              {lastConnectAt
                ? formatDistance(new Date(lastConnectAt), new Date(), {
                    addSuffix: true,
                  })
                : "never"}
            </Text>
          </Flex>
        </Flex>
      </Flex>
    </ContextMenuTrigger>
  );
}

export function Page(props: Props){
  return(
    <Flex justify="center" align="center" w="full" h="100vh" bg="gray.900" direction="column">
      {props.children}
    </Flex>
  )
}

RepositoriesList = () => {
  return (
    <>
      <AnimatePage>
        <Box minH={"50vh"}>
          <Flex p="2" justifyContent="center">
            <Heading
              as="h1"
              size="xl"
              bgGradient="linear(to-l, #7928CA, #FF0080)"
              bgClip="text"
              _focus={{ boxShadow: "none", outline: "none" }}
              _hover={{
                textDecoration: "none",
                bgGradient: "linear(to-r, red.500, yellow.500)"
              }}
            >
              Repositories
            </Heading>
          </Flex>
          {/* <SlideFade in={true} offsetY="50vh"> */}
          <SimpleGrid
            columns={[1, 2, 2, 3]}
            mt="40px"
            gridGap="10px"
            position="relative"
            overflow="hidden"
          >
            {repositoriesList.map((repo, index) => (
              <motion.div whileHover={{ y: -10 }} key={index}>
                <RepositoriesListItem repo={repo} />
              </motion.div>
            ))}
          </SimpleGrid>
          {/* </SlideFade> */}
        </Box>
      </AnimatePage>
    </>
  );
}

Card = (props: CardProps) => {
  const { title, role, skills, period, logo, colorMode, alt } = props;
  return (
    <CardTransition>
      <Box
        px={4}
        py={5}
        borderWidth="1px"
        _hover={{ shadow: "lg" }}
        bg={useColorModeValue("white", "gray.800")}
        position="relative"
        rounded="md"
      >
        <Flex justifyContent="space-between">
          <Flex>
            <Image
              rounded="full"
              w={16}
              h={16}
              objectFit="cover"
              fallbackSrc={placeholder}
              src={logo}
              alt={alt}
            />
            <Stack spacing={2} pl={3} align="left">
              <Heading
                align="left"
                fontSize="xl"
                color={`mode.${colorMode}.career.text`}
              >
                {title}
              </Heading>
              <Heading
                align="left"
                fontSize="sm"
                color={`mode.${colorMode}.career.subtext`}
              >
                {role}
              </Heading>
              <Stack
                spacing={1}
                mt={3}
                isInline
                alignItems="center"
                display={["none", "none", "flex", "flex"]}
              >
                {skills.map(skill => (
                  <Tag size="sm" padding="0 3px" key={skill}>
                    {skill}
                  </Tag>
                ))}
              </Stack>
            </Stack>
          </Flex>
          <Stack display={["none", "none", "flex", "flex"]}>
            <Text fontSize={14} color={`mode.${colorMode}.career.subtext`}>
              {period}
            </Text>
          </Stack>
        </Flex>
        <Stack
          spacing={1}
          mt={3}
          isInline
          alignItems="center"
          display={["flex", "flex", "none", "none"]}
        >
          {skills.map(skill => (
            <Tag size="sm" padding="0 3px" key={skill}>
              {skill}
            </Tag>
          ))}
        </Stack>
      </Box>
    </CardTransition>
  );
}

JsonSchemaEditor = (props: SchemaEditorProps) => {
	const { onSchemaChange, readOnly, data } = props;

	const schemaState = useSchemaState({
		jsonSchema: data ?? defaultSchema(),
		isReadOnly: readOnly ?? false,
		fieldId: 0,
	});

	const jsonSchemaState = useState(schemaState.jsonSchema);

	return (
		<ChakraProvider theme={theme}>
			{schemaState.isValidSchema ? (
				<Flex m={2} direction="column">
					<SchemaRoot
						onSchemaChange={onSchemaChange}
						schemaState={schemaState.jsonSchema}
						isReadOnly={schemaState.isReadOnly}
					/>

					{jsonSchemaState.type.value === "object" && (
						<SchemaObject
							schemaState={jsonSchemaState}
							isReadOnly={schemaState.isReadOnly ?? false}
						/>
					)}

					{jsonSchemaState.type.value === "array" && (
						<SchemaArray
							schemaState={jsonSchemaState}
							isReadOnly={schemaState.isReadOnly ?? false}
						/>
					)}
				</Flex>
			) : (
				<Flex alignContent="center" justifyContent="center">
					<Whoops />
				</Flex>
			)}
			{/* <Modal
        isOpen={localState.isAdvancedOpen.get()}
        finalFocusRef={focusRef}
        size="lg"
        onClose={onCloseAdvanced}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader textAlign="center">Advanced Schema Settings</ModalHeader>

          <ModalBody>
            <AdvancedSettings itemStateProp={localState.currentItem} />
          </ModalBody>

          <ModalFooter>
            <Button
              colorScheme="blue"
              variant="ghost"
              mr={3}
              onClick={onCloseImport}
            >
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal> */}
		</ChakraProvider>
	);
}

CountdownBanner = () => {

    const [isOpen, setIsOpen] = useState(false)
    const [countdownValue, setCountdownValue] = useState(999999)
    const [arrowXTranslate, setArrowXTranslate] = useState(0)
    const final = new Date(Date.UTC(2022, 0, 24, 16, 0, 0, 0)).getTime()

    const getCountdownSeconds = () => {
        const now = new Date().getTime()
        return (final - now) / 1000
    }

    const updateCountdownValue = () => {
        let newCountdownValue = getCountdownSeconds()
        setCountdownValue(newCountdownValue)
        if(newCountdownValue > 0) {
            setTimeout(() => {
                updateCountdownValue()
            }, 1000)
        }
    }

    const getCountdownString = (inputSeconds: number) => {
        let hours = inputSeconds / 3600
        let minutes = (hours % 1) * 60
        let seconds = (minutes % 1) * 60

        let hoursText = hours < 10 ? '0'+Math.floor(hours) : Math.floor(hours)
        let minutesText = minutes < 10 ? '0'+Math.floor(minutes) : Math.floor(minutes)
        let secondsText = seconds < 10 ? '0'+Math.floor(seconds) : Math.floor(seconds)
        
        return hoursText + ':' + minutesText + ':' + secondsText
    }

    useEffect(() => {
        updateCountdownValue()
        setTimeout(() => {
            setIsOpen(true)
        }, 500)
    }, [])



    return (
        <Link href='https://rari.app' isExternal _hover={{textDecoration: 'none'}}>
        <Collapse in={isOpen}
        onHoverStart={() => setArrowXTranslate(6)}
        onHoverEnd={() => setArrowXTranslate(0)}
        >
        <Flex width="100%" height="70px" flexDirection={'column'} justifyContent={'center'}
        backgroundImage={`url(${BGLeft}), url(${BGRight}), linear-gradient(90.05deg, #072FAD 4.01%, #0F82C7 96.95%)`}
        backgroundSize={'contain'}
        backgroundRepeat={'no-repeat'}
        backgroundPosition={'left, right, left'}
        >
            <Flex width="100%" flexDirection={'row'} justifyContent={'center'}>
                    <Image width="30px" height="34px" src={ArbitrumLogo}/>
                    <Text textTransform="uppercase" fontSize={'xl'} color={'#FFFFFF'} marginX={"12px"} mt={"3px"} textShadow={'0px 0px 5px rgba(255, 255, 255, 0.5);'}>
                        {countdownValue > 0 ? 
                        <>
                        Arbitrum is live in <Box as='span' fontWeight="bold">{getCountdownString(countdownValue)}</Box>
                        </>
                        :
                        <>
                        Arbitrum is <Box as='span' fontWeight="bold">here</Box>
                        </>
                        }
                    </Text>
                    {countdownValue <= 0 && <Image height="28px" width="28px" src={RightArrow} mt="3px" ml="-1px" 
                    transform={`translate(${arrowXTranslate}px)`} 
                    transition={'transform 0.5s'}
                    transitionTimingFunction={'ease-out'}/>}
            </Flex>
        </Flex>
        </Collapse>
        </Link>
    )
}

RowWidget = (props: RowWidgetProps): JSX.Element => {
  const {
    setInitialValue,
    submitChange,
    resourceName,
    mainDetailObject,
    provider,
    setMainDetailObject,
    refreshMainDetailObject,
    notifier,
    user,
    analytics,
    ViewType,
    containerStore,
    widgets,
    name,
    style,
    setCurrentState,
    elementWrapperStyle: generalElementWrapperStyle,
  } = props

  const context = (containerStore as Store<object>).getState()

  const { getDataTestId } = useCreateTestId()

  return (
    <Flex data-name={name} flexWrap="wrap" {...getDataTestId(props)} {...style}>
      {widgets?.map((widgetElement: any) => {
        const { widget, elementWrapperStyle, name: widgetName, ...rest } = widgetElement
        const ComponentToMount = getComponentFromCallable(widget, user, mainDetailObject, context)
        return (
          <Box key={widgetName} name={widgetName} {...generalElementWrapperStyle} {...elementWrapperStyle}>
            <ComponentToMount
              name={widgetName}
              resource={resourceName}
              resourceName={resourceName}
              mainDetailObject={mainDetailObject}
              provider={provider}
              setMainDetailObject={setMainDetailObject}
              refreshMainDetailObject={refreshMainDetailObject}
              notifier={notifier}
              analytics={analytics}
              viewType={ViewType}
              setInitialValue={setInitialValue}
              submitChange={submitChange}
              containerStore={containerStore}
              setCurrentState={setCurrentState}
              {...rest}
            />
          </Box>
        )
      })}
    </Flex>
  )
}

export default function Layout({ children }: Props) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta name="description" content="Dendron" />
        <meta
          property="og:image"
          content="https://foundation-prod-assetspublic53c57cce-8cpvgjldwysl.s3-us-west-2.amazonaws.com/assets/logo-256.png"
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>

      <Flex height="full" direction="column">
        <Flex
          as="header"
          bgColor="gray.900"
          color="white"
          paddingX={4}
          paddingY={2}
          alignItems="center"
        >
          <Image
            src="https://foundation-prod-assetspublic53c57cce-8cpvgjldwysl.s3-us-west-2.amazonaws.com/assets/logo-256.png"
            id="logo"
            alt={name}
            boxSize={12}
          />

          {/*
          <Box marginLeft="auto">
            <Link
              target="_blank"
              href="https://dendron.memberful.com/account/subscriptions"
              color="currentColor"
              textDecoration="none"
              _hover={{ textDecoration: "inherit" }}
              role="group"
            >
              Contribute to Dendron{" "}
              <Box as="span" _groupHover={{ display: "none" }}>
                ?
              </Box>
              <Icon
                as={GoLinkExternal}
                display="none"
                _groupHover={{ display: "inline-block" }}
              />
            </Link>
          </Box>
            */}
        </Flex>

        <Box flexGrow={1} padding={8}>
          {children}
        </Box>
      </Flex>
    </ChakraProvider>
  );
}