@chakra-ui/react#HStack TypeScript Examples

Key = (props: {keyName: string, keyCode: number, selectedKey?: number, onSelect: (key?: number) => void}) => {
    return (
        <HStack>
            <Text>
                {props.keyName}
            </Text>
            <Spacer />
            <Button
                // backgroundColor="green"
                onClick={() => props.onSelect(props.selectedKey === props.keyCode ? undefined : props.keyCode)}
                variant="primary"
            >
                {props.selectedKey === props.keyCode ? 'Type a key' : keyCodeToChar[props.keyCode]}
            </Button>
        </HStack>
    )
}

function Footer({ onClose, onSubmit, isEditing }: Props) {
  return (
    <ModalFooter>
      <HStack spacing={3}>
        <Button onClick={onClose}>Close</Button>
        {isEditing && (
          <Button
            colorScheme="teal"
            type="submit"
            variant="solid"
            onClick={onSubmit}
          >
            Save food
          </Button>
        )}
      </HStack>
    </ModalFooter>
  )
}

FeatureTitle: FC<{ imgSrc: string; title: string }> = ({ imgSrc, title }) => {
  return (
    <>
      <HStack>
        <Image src={imgSrc} width="120px" height="120px" alt={title} />
      </HStack>
      <br />
      <HStack>
        <Heading fontSize="1em">{title}</Heading>
      </HStack>
    </>
  );
}

AnnounceUpcomingTopic: React.FC<{ upcoming: UpcomingTopic }> = ({ upcoming }) => {
  const { data: conferenceData } = Api.useConference();
  const { topic, speakers } = upcoming;

  if (!topic) return <></>;
  const track = conferenceData?.conference?.tracks[upcoming.track];
  if (!track) return <></>;

  return (
    <Box textAlign="left">
      <Text fontWeight="500" fontSize="1.8vw" lineHeight="2.3vw" mb="1.1vw">
        {track.name}
      </Text>
      <HStack alignItems="top" spacing="0.7vw" textAlign="left">
        {speakers && speakers.length > 0 ? (
          <Box w="100%" maxW="7vw">
            <SpeakerAvatar speakers={speakers} />
          </Box>
        ) : null}
        <Box as="div">
          <Heading as="h2" fontSize="2.1vw" lineHeight="2.5vw" fontWeight="700">
            {topic.title}
          </Heading>
          {speakers && speakers.length > 0 ? (
            <Box>
              {speakers.map((s) => (
                <ScreenTopicSpeaker key={s.avatar_url} speaker={s} />
              ))}
            </Box>
          ) : null}
        </Box>
      </HStack>
    </Box>
  );
}

DopePreview: FC<DopePreviewProps> = ({ dope }) => {
  const tierCounts = useMemo(() => {
    return dope.items.reduce(
      (result, item) => {
        return {
          ...result,
          [item.tier]: result[item.tier] + 1,
        };
      },
      {
        [ItemTier.BlackMarket]: 0,
        [ItemTier.Common]: 0,
        [ItemTier.Custom]: 0,
        [ItemTier.Rare]: 0,
      },
    );
  }, [dope]);

  return (
    <Box background="black" borderRadius="md" p={4}>
      <Stack color="gray">
        <span>( {dope.rank} / 8000 )</span>
        {[ItemTier.BlackMarket, ItemTier.Custom, ItemTier.Rare, ItemTier.Common].map(tier => {
          return (
            <Flex key={tier} justify="space-between">
              <HStack color={TIER_META[tier].color} spacing={2}>
                <span>●</span>
                <span>{tierCounts[tier]}</span>
              </HStack>
              <span>{TIER_META[tier].label}</span>
            </Flex>
          );
        })}
      </Stack>
    </Box>
  );
}

AnnounceTime: React.FC<{ unix: number }> = ({ unix }) => {
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    let i = 0;
    const interval = setInterval(() => {
      i = (i + 1) % TIME_ZONES.length;
      setIdx(i);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const [tzName, tz] = TIME_ZONES[idx]!;

  const t = dayjs.unix(unix);
  return (
    <VStack>
      <HStack spacing="2vw">
        <AnnounceTimeItem tz={tzName} t={t.tz(tz)} />
        <AnnounceTimeItem tz={"UTC"} t={t.utc()} />
        <AnnounceTimeItem tz={"JST"} t={t.tz("Asia/Tokyo")} />
      </HStack>
    </VStack>
  );
}

DrugQuantityGauge = ({
  gaugeColor,
  fillPercentage,
  shouldDisableDecrease,
  shouldDisableIncrease,
  onClickDecrease,
  onClickIncrease,
}: {
  gaugeColor: BackgroundProps["background"];
  fillPercentage?: number;
  shouldDisableDecrease: boolean;
  shouldDisableIncrease: boolean;
  onClickDecrease: () => void;
  onClickIncrease: () => void;
}) => {
  return (
    <HStack justify="space-evenly">
      <Button disabled={shouldDisableDecrease} fontSize="3xl" onClick={onClickDecrease}>
        -
      </Button>
      <Box
        border="3px solid black"
        h={5}
        w={200}
      >
        <Box background={gaugeColor} h="full" w={`${fillPercentage}%`} />
      </Box>
      <Button disabled={shouldDisableIncrease} fontSize="3xl" onClick={onClickIncrease}>
        +
      </Button>
    </HStack>
  )
}

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

ScreenTopicSpeaker: React.FC<{ speaker: Speaker }> = ({ speaker }) => {
  const primaryAlias = speaker.github_id || speaker.twitter_id;
  const primaryIcon =
    (speaker.github_id && <GitHubIcon boxSize="1.55vw" m={0} />) ||
    (speaker.twitter_id && <TwitterIcon boxSize="1.55vw" m={0} />);
  return (
    <HStack
      as="p"
      spacing="1vw"
      fontWeight="500"
      fontSize="1.6vw"
      h="20px"
      lineHeight="2vw"
      mt="0.7vw"
      color={Colors.main}
    >
      <Text as="span">{speaker.name}</Text>
      {primaryIcon ? primaryIcon : null}
      {primaryAlias ? (
        <Text as="span" m={0}>
          @{primaryAlias}
        </Text>
      ) : null}
    </HStack>
  );
}

SongComponent = (props: {
    song: Song,
    musicManager: MusicManager,
    updateState: React.DispatchWithoutAction
}) => <HStack>
    <Text>
        {props.song.name}
    </Text>
    <Spacer />
    <Button
        // backgroundColor="green"
        onClick={() => {
            props.musicManager.shuffle(props.song, undefined, false);
            props.updateState();
        }}
        variant="primary"
        disabled={props.song === props.musicManager.currentSong}
    >
        Play
    </Button>
</HStack>

Header = ({ backRoute, title }: IProps) => {
  const { push } = useRouter()

  return (
    <Box width="100%" height={16} px={6}>
      <HStack spacing={2} alignItems="center" flex={1} height="100%">
        {!!backRoute && (
          <ChevronLeftIcon
            color="blue.500"
            fontSize="2xl"
            onClick={() => push(backRoute)}
            cursor="pointer"
          />
        )}
        <Text color="blue.500" fontWeight="bold" fontSize="lg">
          {title}
        </Text>
      </HStack>
    </Box>
  )
}

Round = () => (
  <>
    <Head title="Roll Your Own" />
    <GameWindow>
      <GameWindowHeader>
        <NavLink href="/roll-your-own">
          <Button variant="unstyled">
            <HStack color="black">
              <ArrowBack />
              <span>Back</span>
            </HStack>
          </Button>
        </NavLink>
        <GameWindowHeaderHustlerProfile />
      </GameWindowHeader>
      <MatchDetails />
    </GameWindow>
  </>
)

export function LoadingSkeleton() {
  const data = [1, 2, 3]
  const bgBox = useColorModeValue('white', 'gray.800')

  return (
    <List spacing={3}>
      {data.map((d: number) => (
        <ListItem
          key={d}
          w={'full'}
          bg={bgBox}
          boxShadow={'2xl'}
          rounded={'md'}
          overflow={'hidden'}
          p={6}
        >
          <Skeleton height="30px" mb="4" />

          <Skeleton height="10px" mb="1" />
          <Skeleton height="10px" />

          <HStack spacing={2} mt={4}>
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
          </HStack>
        </ListItem>
      ))}
    </List>
  )
}

PinInputControl: FC<PinInputControlProps> = (
  props: PinInputControlProps
) => {
  const { name, label, pinAmount, stackProps, pinInputProps, ...rest } = props;
  const [field, , { setValue }] = useField(name);
  const renderedPinInputFields = Array(pinAmount).fill(null).map((_noop, i) => (
    <PinInputField key={i} />
  ));
  function handleChange(value: string) {
    setValue(value);
  }

  return (
    <FormControl name={name} label={label} {...rest}>
      <HStack {...stackProps}>
        <PinInput {...field} onChange={handleChange} {...pinInputProps}>
          {renderedPinInputFields}
        </PinInput>
      </HStack>
    </FormControl>
  );
}

TabNav = (props: BoxProps) => (
  <HStack
    as="nav"
    spacing="5"
    fontSize="sm"
    lineHeight="5"
    alignItems="baseline"
    {...props}
  />
)

CardSkeleton = () => {
  const bgColor = useColorModeValue("white", "gray.900");
  const cards:number[] = [1, 2, 3, 4, 5, 6, 7, 8]

  return (
    <>
      {cards.map(id => {
        return (
          <Box
            key={id}
            size="xl"
            py={2}
            rounded="xl"
            borderWidth="1px"
            bg={bgColor}
          >
            <Stack isInline justifyContent="space-between" py={2} px={[2, 3]}>
              <Box width="100%">
                <HStack isInline justifyContent="space-between">
                  <Skeleton height="14px" width="40%" />
                  <Skeleton height="14px" width="20%" />
                </HStack>
                <VStack align="start" marginTop={2}>
                  <Skeleton height="8px" width="30%" />
                </VStack>
                <Box marginTop={2}>
                  <Skeleton height="8px" width="100%" />
                  <Stack spacing={2} mt={1} isInline alignItems="center">
                    <Skeleton height="8px" width="80%" />
                  </Stack>
                </Box>
              </Box>
            </Stack>
          </Box>
        );
      })}
    </>
  );
}

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

function StatValueDetail({
  label,
  tooltipLabel,
  leftIcon,
  isLarge = false,
}: Props) {
  return (
    <HStack alignItems="center" spacing={1}>
      {leftIcon}

      <Tooltip label={tooltipLabel}>
        <Text color="gray.800" fontSize={isLarge ? 'md' : 'sm'}>
          {label}
        </Text>
      </Tooltip>
    </HStack>
  )
}

function CourseCard(props: CourseCardProps) {
  const {courseDetails: course, couponData, isAlreadyAFreeCourse} = props.course
  const courseLink = isAlreadyAFreeCourse ? course.courseUri : `${course.courseUri}?couponCode=${couponData?.couponCode}`

  return (
    <Box as="section" py="1">
      <Card maxW={"8xl"}>
        <DiscountBadge isAlreadyAFreeCourse={isAlreadyAFreeCourse} discountPercentage={couponData?.discountPercentage}/>
        <Stack
          spacing="5"
          align="flex-start"
        >
          <HStack spacing={3}>
            <CourseTitle title={course.title} url={courseLink}/>
            <CourseLanguage language={course.language}/>
          </HStack>
          <CourseTags tags={course.tags}/>
          <HStack my="4" spacing="4">
            <CourseRating reviewCount={course.rating?.count} rating={course.rating?.averageValue}/>
            <EnrolledStudentsCount enrolledStudentsCount={course.enrolledStudentsCount}/>
            <CourseDuration duration={course.duration} isFreeCourse={isAlreadyAFreeCourse}/>
            <LastUpdated lastUpdated={course.lastUpdated}/>
          </HStack>
          <Box fontSize="sm" noOfLines={2}>
            {course.shortDescription}
          </Box>
          <CourseInstructors instructors={course.instructors}/>
        </Stack>
      </Card>
    </Box>
  )
}

UnbundleSuccess = () => {
  const [gangstaParty, setGangstaParty] = useState(false);

  const image = gangstaParty ? 'bridge_with_hustlers.png' : 'bridge_no_hustlers.png';

  return (
    <>
      <Head title="Bridging and unbundling items to Optimism" />
      <ScreenSaver image={image}>
        {gangstaParty && (
          <>
            <PlugContainer>
              <Image src="/images/masthead/ogs.svg" alt="DOPE OGS" />
              <ul>
                {PLUGS.sort(() => Math.random() - 0.5).map((plug, index) => {
                  return (
                    <li key={`plug-${index}`}>
                      <a href={plug.link} target={plug.name}>
                        {plug.prefix ? <div className="prefix">&quot;{plug.prefix}&quot;</div> : ''}
                        {plug.name}
                        {plug.suffix ? <div className="suffix">&quot;{plug.suffix}&quot;</div> : ''}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </PlugContainer>
            <WebAmpPlayer />
          </>
        )}
        {!gangstaParty && (
          <>
            <MastheadContainer>
              <Image src={randomMast()} alt="Dope." />
            </MastheadContainer>
            <AlertContainer>
              <Alert status="success">
                <div>
                  <p>
                    Your Gear is making its way to the Optimism network.
                    <br />
                    <br />
                    It could take up to 15 minutes for that to happen. In the meantime, lets get it
                    crackin homie…
                  </p>
                  <Button
                    onClick={() => {
                      setGangstaParty(true);
                    }}
                  >
                    Gangsta Party
                  </Button>
                </div>
              </Alert>
            </AlertContainer>
          </>
        )}
      </ScreenSaver>
      <HStack
        m={4}
        gridGap={1}
        bottom={0}
        right={0}
        position="absolute"
        width="100%"
        justifyContent="end"
      >
        <Link href="/inventory?section=Dope" passHref>
          <Button variant="primary">Unbundle More</Button>
        </Link>
      </HStack>
    </>
  );
}

ContextMenuItem: React.FC<Props> = ({
  children,
  onClick,
  color,
  colorScheme,
  disabled,
  command,
  icon,
  ...buttonProps
}) => {
  const [contextMenusState, setContextMenusState] =
    useRecoilState(contextMenusAtom);

  return (
    <Button
      onClick={(e) => {
        e.preventDefault();

        // call the provided click handler with the event and the passthrough data from the trigger
        onClick && onClick({ event: e, passData: contextMenusState.passData });

        // TODO: make it more specific
        // close all menus
        setContextMenusState((oldState) => {
          return {
            ...oldState,
            menus: oldState.menus.map((m) => ({
              ...m,
              isOpen: false,
            })),
          };
        });
      }}
      borderRadius={0}
      w="full"
      justifyContent="space-between"
      size="sm"
      overflow="hidden"
      textOverflow="ellipsis"
      colorScheme={colorScheme}
      color={color}
      disabled={disabled}
      {...buttonProps}
    >
      {/* left */}
      <HStack spacing={2} alignItems="center" w="full" h="full">
        {/* icon */}
        {icon}
        {/* children */}
        <Text>{children}</Text>
      </HStack>
      {/* right */}
      <Text size="sm" opacity={0.5} fontFamily="mono">
        {command}
      </Text>
    </Button>
  );
}

HasHustler = (props: Props) => {
    const [ page, setPage ] = useState(0);
    const [ hustlerIndex, setHustlerIndex ] = useState(0);

    useEffect(() => {
        localStorage.setItem(`gameSelectedHustler_${(window.ethereum as any).selectedAddress}`, props.hustlerData[hustlerIndex].id);
    }, [hustlerIndex, props.hustlerData]);

    const pages: Array<Page> = [
        {
            heading: "Hey, seems like it's your first time here! Let's get you up and running with the basics.",
            text: `Cool, you seem to already have a hustler, let's get you and your hustler set up.
            Which hustler do you wanna play with?`,
            children: <>
                <Select onChange={(e) => setHustlerIndex(Number.parseInt(e.target.value))}>
                    {props.hustlerData.map((hustler: any, i: number) => <option key={i} value={i}>{hustler.id} {hustler.name ? " - " + hustler.name : ""}</option>)}
                </Select><br /><object type="image/svg+xml" data={props.hustlerData[hustlerIndex].svg} />
            </>,
        },
        // {
        //     heading: "Where do you wanna start out your journey?",
        //     text: `There are many cities available in the game, you can visit 'em all whenever you want but you can
        //     choose one to start with.`
        // }
    ]

    const handleNext = () => {
        pages[page].onNext && pages[page].onNext!();
        if (page === pages.length - 1)
        {
            props.manager.events.emit('game');
            return;
        }

        setPage(page + 1);
    }

    return (
        <VStack>
            <Heading>
                {pages[page].heading}
            </Heading>
            <br />
            <Text>
                {pages[page].text}
            </Text>
            {pages[page].children}
            <HStack style={footerButtonsStyle}>
                <Button onClick={() => props.manager.events.emit('game')}>
                    {page === pages.length - 1 ? "Finish" : "DGAF"}
                </Button>
                {page > 0 ? <Button onClick={() => setPage(page - 1)}>
                    Go back
                </Button> : undefined}
                {page < pages.length - 1 ? <Button onClick={handleNext}>
                    Next
                </Button> : undefined}
            </HStack>
        </VStack>
    );
}

NavBar = (): JSX.Element => {
    const { colorMode, toggleColorMode } = useColorMode();

    return (
        <Flex
            height="20"
            alignItems="center"
            borderBottomWidth="1px"
            borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
            justifyContent='space-between'
            p={4}
            pl={6}
        >
            <Flex alignItems="center" justifyContent='flex-start'>
                <img src={logo} className="logo" alt="logo" height={48} />
                <Text fontSize="1xl" ml={2}>BlueBubbles</Text>
            </Flex>
            <Flex justifyContent='flex-end'>
                <HStack spacing={{ base: '0', md: '1' }}>
                    <Tooltip label="Website Home" aria-label="website-tip">
                        <Link href="https://bluebubbles.app" style={{ textDecoration: 'none' }} target="_blank">
                            <IconButton size="lg" variant="ghost" aria-label="website" icon={<AiOutlineHome />} />
                        </Link>
                    </Tooltip>
                    <Tooltip label="BlueBubbles Web" aria-label="website-tip">
                        <Link href="https://bluebubbles.app/web" style={{ textDecoration: 'none' }} target="_blank">
                            <IconButton size="lg" variant="ghost" aria-label="bluebubbles web" icon={<FiMessageCircle />} />
                        </Link>
                    </Tooltip>
                    <Tooltip label="Support Us" aria-label="donate-tip">
                        <Link href="https://bluebubbles.app/donate" style={{ textDecoration: 'none' }} target="_blank">
                            <IconButton size="lg" variant="ghost" aria-label="donate" icon={<MdOutlineAttachMoney />} />
                        </Link>
                    </Tooltip>
                    <Tooltip label="Join our Discord" aria-label="discord-tip">
                        <Link href="https://discord.gg/yC4wr38" style={{ textDecoration: 'none' }} target="_blank">
                            <IconButton size="lg" variant="ghost" aria-label="discord" icon={<FaDiscord />} />
                        </Link>
                    </Tooltip>
                    <Tooltip label="Read our Source Code" aria-label="github-tip">
                        <Link href="https://github.com/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
                            <IconButton size="lg" variant="ghost" aria-label="github" icon={<FiGithub />} />
                        </Link>
                    </Tooltip>
                    <Spacer />
                    <Divider orientation="vertical" width={1} height={15} borderColor='gray' />
                    <Spacer />
                    <Spacer />
                    <Spacer />
                    <FormControl display='flex' alignItems='center'>
                        <Box mr={2}><MdOutlineDarkMode size={20} /></Box>
                        <Switch id='theme-mode-toggle' onChange={toggleColorMode} isChecked={colorMode === 'light'} />
                        <Box ml={2}><MdOutlineLightMode size={20} /></Box>
                    </FormControl>
                </HStack>
            </Flex>
        </Flex>
    );
}

Stepper = (props: Props) => {
    const [ page, setPage ] = useState(0);
    const [ hustlerIndex, setHustlerIndex ] = useState(0);

    const pages: Array<Page> = [
        {
            heading: "Welcome to Dope Wars!",
            text: '',
            children: <>
                <Text>
                    Welcome OG Hustlers to the beginnings of our Dope City Murderverse! What we have to show is the culmination of untiring efforts from our developers, artists, musicians, and YOU, our community. 
                    It represents the love for what we stand for, the values that we live by, and our unwillingness to waver from them. We are web3. We are hip-hop culture. 
                    We are free minds. We are from all walks of life that have come together for this unified purpose. We are hustlers. What does it represent for you? 
                </Text>
                <Text>
                    Thank you so much for your support. 
                    We felt it was completely necessary to invite you all to our first stress test of Dope City, where you can interact with other hustlers by chatting, flexing your gear, and figuring out how to stack PAPER.  
                    It is a glimpse into a world that has become entrenched in a battle for glory, a struggle for reputation, and a fight for leadership. Welcome to Dope Wars. How will the story unfold?
                </Text>
        
            </>
        },
        {
            heading: "Message from the dev ?",
            text: '',
            children: <>
                <Text>
                    Thanks for joining us today everyone, it is with true joy and proudness that we're presenting you the current state of game!
                </Text>
                <Text>
                    However, please note that this is not the final state of the game and that some parts are still unfinished and *buggy*, so please don't expect
                    the best performance and accuracy. After all, this is still just **fun** stress test so don't be afraid to play around with the game and see what you can do (break)! 
                </Text>
                <Text>
                    Anyway, I'm not gonna bother you anymore so yeah... have fun!
                </Text>
            </>
        }
    ]

    const handleNext = () => {
        pages[page].onNext && pages[page].onNext!();
        if (page === pages.length - 1)
        {
            props.manager.events.emit('game');
            return;
        }

        setPage(page + 1);
    }

    return (
        <VStack>
            <Heading>
                {pages[page].heading}
            </Heading>
            <Text>
                {pages[page].text}
            </Text>
            {pages[page].children}
            <HStack style={footerButtonsStyle}>
                <Button onClick={() => props.manager.events.emit('game')}>
                    {page === pages.length - 1 ? "Finish" : "DGAF"}
                </Button>
                {page > 0 ? <Button onClick={() => setPage(page - 1)}>
                    Go back
                </Button> : undefined}
                {page < pages.length - 1 ? <Button onClick={handleNext}>
                    Next
                </Button> : undefined}
            </HStack>
        </VStack>
    );
}

function VolumeFields({ canEdit, food }: Props) {
  const { register } = useFormContext<FoodForm>()
  const { portionsById, volumeBasedPortions } = usePortions()
  const portion = food?.volume ? portionsById[food.volume.portionId] : undefined

  return (
    <Flex minHeight={canEdit ? '200px' : undefined} flexDirection="column">
      {canEdit && (
        <Alert status="info" mb={3}>
          <AlertIcon color="teal.400" />
          Enter the food weight in grams per some volume measurement if you want
          to convert between weight and volume (for example: between grams and
          cups).
        </Alert>
      )}

      <HStack spacing={2}>
        {canEdit && <Text fontWeight="medium">1 x</Text>}
        {canEdit ? (
          <PortionsSelect
            width="200px"
            portions={volumeBasedPortions}
            {...register('volumeForm.portionId')}
          />
        ) : (
          <Text fontWeight="medium">
            1 x {`${portion?.singular} (${portion?.millilitersPerAmount} ml)`}
          </Text>
        )}

        <Text fontWeight="medium">=</Text>
        <HStack spacing={1} alignItems="center">
          {canEdit ? (
            <Controller
              name="volumeForm.weightInGrams"
              render={({ field }) => (
                <AmountInput value={field.value} onChange={field.onChange} />
              )}
            />
          ) : (
            <Text>{food?.volume?.weightInGrams}g</Text>
          )}
          {canEdit && <Text textColor="gray.500">g</Text>}
        </HStack>
      </HStack>
    </Flex>
  )
}

GameWindowHeaderHustlerProfile = () => {
  return (
    <HStack>
      <span>Avatar</span>
      <span>Username</span>
    </HStack>
  )
}

ChatStatusView: React.FC<Props> = ({ status, loading, error }) => {
  const shouldClose = status === "CONNECTED" && !loading && !error;
  const [shouldCloseState, setShouldCloseState] = React.useState(shouldClose);

  React.useEffect(() => {
    const timer = setTimeout(() => setShouldCloseState(shouldClose), 1500);
    return () => clearTimeout(timer);
  }, [shouldClose]);

  let statusHuman = "Doing something (unknown state!?)";
  let progress = -1;

  if (status === "INIT" || status === undefined) {
    statusHuman = "Obtaining chat session";
    progress = 25;
  } else if (status === "READY" || status === "CONNECTING" || status == "CONNECT_ERROR") {
    statusHuman = "Connecting to chat";
    progress = 50;
  } else if (loading) {
    statusHuman = "Loading chat history";
    progress = 75;
  } else if (status === "CONNECTED") {
    statusHuman = "Connected to chat";
    progress = 100;
  } else if (status === "SHUTTING_DOWN") {
    statusHuman = "Disconnecting";
    progress = -1;
  }

  // TODO: (refactor) move minH/w/flexBasis to TrackChat
  return (
    <Box w="100%" flexBasis={0}>
      <Collapse in={!shouldCloseState} animateOpacity>
        <VStack py={1} w="100%" bgColor="#ffffff" borderBottom="1px solid" borderColor={Colors.chatBorder}>
          <HStack>
            <CircularProgress
              aria-label={`${statusHuman}`}
              value={progress}
              isIndeterminate={progress === -1}
              size="15px"
            />
            <Text aria-hidden="true" fontSize="14px">
              {statusHuman}
            </Text>
          </HStack>
        </VStack>
      </Collapse>
      {error ? <ErrorAlert error={error} /> : null}
    </Box>
  );
}

Dopes = ({ searchValue }: { searchValue: string }) => {
  const { account } = useWeb3React();
  const { data, hasNextPage, isFetching, fetchNextPage } = useInfiniteProfileDopesQuery(
    {
      where: {
        hasWalletWith: [
          {
            id: account,
          },
        ],
        hasItemsWith: [
          {
            nameContains: searchValue,
          },
        ],
      },
      first: 50,
    },
    {
      getNextPageParam: lastPage => {
        if (lastPage.dopes.pageInfo.hasNextPage) {
          return {
            after: lastPage.dopes.pageInfo.endCursor,
          };
        }
        return false;
      },
    },
  );

  const dopeData: DopeData = useMemo(() => {
    const defaultValue = { dopes: [], totalCount: 0 };

    if (!data?.pages) return defaultValue;

    return data.pages.reduce((result, page) => {
      if (!page.dopes.edges) return result;

      const { totalCount } = page.dopes;

      return {
        totalCount,
        dopes: [
          ...result.dopes,
          ...page.dopes.edges.reduce((result, edge) => {
            if (!edge?.node) return result;
            return [...result, edge.node];
          }, [] as ProfileDope[]),
        ],
      };
    }, defaultValue as DopeData);
  }, [data]);

  return (
    <>
      <SectionHeader>
        <HStack alignContent="center" justifyContent="space-between" width="100%" marginRight="8px">
          <span>DOPE</span>
          <ItemCount count={dopeData.totalCount} />
        </HStack>
      </SectionHeader>
      <SectionContent isFetching={isFetching && !dopeData.dopes.length} minH={isFetching ? 200 : 0}>
        {dopeData.dopes.length ? (
          <>
            <CardContainer>
              {dopeData.dopes.map(dope => (
                <DopeCard key={dope.id} buttonBar="for-owner" dope={dope} />
              ))}
              {isFetching && dopeData.dopes && <LoadingBlock maxRows={1} />}
              {hasNextPage && <Button onClick={() => fetchNextPage()}>Load more</Button>}
            </CardContainer>
          </>
        ) : (
          <span>No DOPE found</span>
        )}
      </SectionContent>
    </>
  );
}

function Content({ onClose, title, onImport, action }: Props) {
  const { allFoods } = useFoods()

  const [blob] = useState(() => {
    const allFoodsString = JSON.stringify(allFoods)
    return new Blob([allFoodsString])
  })

  return (
    <ModalContent>
      <ModalHeader>{title}</ModalHeader>
      <ModalCloseButton />

      <ModalBody>
        <FoodsList
          allowsFiltering={false}
          height="350px"
          itemUsageType="nonInteractive"
        />
      </ModalBody>

      <ModalFooter>
        <HStack spacing={3}>
          <Button onClick={onClose}>Close</Button>

          {action === 'import' ? (
            <Button
              isDisabled={allFoods.length === 0}
              variant="solid"
              colorScheme="teal"
              onClick={onImport}
            >
              {allFoods.length > 0
                ? `Import ${allFoods.length} ${
                    allFoods.length === 1 ? 'food' : 'foods'
                  }`
                : 'Import'}
            </Button>
          ) : (
            <DownloadButton
              blob={blob}
              onClose={onClose}
              fileName={getUntitledFileName({ prefix: 'foods' })}
              label="Export"
              isDisabled={allFoods.length === 0}
            />
          )}
        </HStack>
      </ModalFooter>
    </ModalContent>
  )
}