@chakra-ui/react#CloseButton TypeScript Examples

SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
    return (
        <Box
            borderRight="1px"
            borderRightColor={useColorModeValue('gray.200', 'gray.700')}
            w={{ base: 'full', md: 60 }}
            pos="fixed"
            h="full"
            {...rest}
        >
            <Flex h="20" alignItems="center" mx="6" justifyContent="flex-start">
                <img src={logo} className="logo" alt="logo" height={48} />
                <Text fontSize="1xl" ml={2}>BlueBubbles</Text>
                <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
            </Flex>
            {LinkItems.map(link => (
                <RouterLink key={link.name} to={link.to}>
                    <NavItem icon={link.icon} to={link.to}>{link.name}</NavItem>
                </RouterLink>
            ))}
        </Box>
    );
}

ModalTitleWithCloseButton = ({
  text,
  onClose,
}: {
  text: string;
  onClose: () => any;
}) => {
  return (
    <Row
      width="100%"
      mainAxisAlignment="space-between"
      crossAxisAlignment="center"
      p={4}
    >
      <Box width="32px" />
      <Heading fontSize="27px" lineHeight="1.25em">
        {text}
      </Heading>
      <CloseButton onClick={onClose} />
    </Row>
  );
}

AddNewFeedForm = () => {
  const [body, setBody] = useState("");
  const [session] = useSession();
  const [
    insertFeed,
    { loading: insertFeedFetching, error: insertFeedError },
  ] = useInsertFeedMutation();

  if (!session) {
    return (
      <AccessDeniedIndicator message="You need to be signed in to add a new feed!" />
    );
  }

  const handleSubmit = async () => {
    await insertFeed({
      variables: {
        author_id: session.id,
        body,
      },
    });

    setBody("");
  };

  const errorNode = () => {
    if (!insertFeedError) {
      return false;
    }

    return (
      <Alert status="error">
        <AlertIcon />
        <AlertTitle>{insertFeedError}</AlertTitle>
        <CloseButton position="absolute" right="8px" top="8px" />
      </Alert>
    );
  };

  return (
    <Stack spacing={4}>
      {errorNode()}
      <Box p={4} shadow="lg" rounded="lg">
        <Stack spacing={4}>
          <FormControl isRequired>
            <FormLabel htmlFor="body">What's on your mind?</FormLabel>
            <Textarea
              id="body"
              value={body}
              onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                setBody(e.currentTarget.value)
              }
              isDisabled={insertFeedFetching}
            />
          </FormControl>
          <FormControl>
            <Button
              loadingText="Posting..."
              onClick={handleSubmit}
              isLoading={insertFeedFetching}
              isDisabled={!body.trim()}
            >
              Post
            </Button>
          </FormControl>
        </Stack>
      </Box>
    </Stack>
  );
}

MyAccountPageComponent = ({ user }) => {
  const [name, setName] = useState(user.name);
  const [session] = useSession();
  const [updateUser, { loading: updateUserFetching, error: updateUserError }] =
    useUpdateUserMutation();

  const handleSubmit = () => {
    updateUser({
      variables: {
        userId: session.id,
        name,
      },
    });
  };

  const errorNode = () => {
    if (!updateUserError) {
      return false;
    }

    return (
      <Alert status="error">
        <AlertIcon />
        <AlertTitle>{updateUserError}</AlertTitle>
        <CloseButton position="absolute" right="8px" top="8px" />
      </Alert>
    );
  };

  return (
    <Stack spacing={8}>
      <Heading>My Account</Heading>
      {errorNode()}
      <Box shadow="lg" rounded="lg" p={4}>
        <Stack spacing={4}>
          <FormControl isRequired>
            <FormLabel htmlFor="name">Name</FormLabel>
            <Input
              type="text"
              id="name"
              value={name}
              onChange={(e: FormEvent<HTMLInputElement>) =>
                setName(e.currentTarget.value)
              }
              isDisabled={updateUserFetching}
            />
          </FormControl>
          <FormControl>
            <Button
              loadingText="Saving..."
              onClick={handleSubmit}
              isLoading={updateUserFetching}
              isDisabled={!name.trim()}
            >
              Save
            </Button>
          </FormControl>
        </Stack>
      </Box>
    </Stack>
  );
}

AddAssetModal = ({
  isOpen,
  poolID,
  onClose,
  poolName,
  oracleModel,
  existingAssets,
  poolOracleAddress,
  comptrollerAddress,
}: {
  comptrollerAddress: string; // Pool's comptroller address.
  poolOracleAddress: string; // Pool's oracle address.
  existingAssets: USDPricedFuseAsset[]; // List of exising assets in fuse pool.
  oracleModel: string | undefined; // Pool's oracle model name.
  poolName: string; // Used to name assets at deployment. i.e f-USDC-koan.
  poolID: string; // Fuse pool ID.
  isOpen: boolean; // Modal config.
  onClose: () => any; // Modal config.
}) => {
  const { t } = useTranslation();
  const { fuse } = useRari();

  // Will change with user's input
  const [tokenAddress, _setTokenAddress] = useState<string>("");

  // Get token data. i.e symbol, logo, etc.
  const tokenData = useTokenData(tokenAddress);

  // Get fuse pool's oracle data. i.e contract, admin, overwriting permissions
  const oracleData = useOracleData(poolOracleAddress, fuse, oracleModel);

  const isEmpty = tokenAddress.trim() === "";

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      motionPreset="slideInBottom"
      isCentered={isEmpty ? true : false}
      closeOnOverlayClick={false}
    >
      <ModalOverlay />
      <ModalContent
        {...MODAL_PROPS}
        width={isEmpty ? "25%" : "50%"}
        height={isEmpty ? "auto" : "95%"}
        maxWidth="50%"
        maxHeight="100%"
        overflowY="scroll"
      >
        <Box
          d="flex"
          flexDirection="row"
          width="100%"
          justifyContent="center"
          alignItems="center"
          px={3}
        >
          <Box flexBasis="10%" />

          <Heading my={4} ml="auto" fontSize="27px" textAlign="center">
            {t("Add Asset")}
          </Heading>

          <Box marginLeft="auto" onClick={onClose} _hover={{ color: "white" , transform: "scale(1.2);" }}>
            <CloseButton />
          </Box>
        </Box>

        <ModalDivider />

        <Column
          mainAxisAlignment="flex-start"
          crossAxisAlignment="center"
          height="100%"
        >
          {!isEmpty ? (
            <>
              {tokenData?.logoURL ? (
                <Image
                  mt={4}
                  src={tokenData.logoURL}
                  boxSize="50px"
                  borderRadius="50%"
                  backgroundImage={`url(${SmallWhiteCircle})`}
                  backgroundSize="100% auto"
                />
              ) : null}
              <Heading
                my={tokenData?.symbol ? 3 : 6}
                fontSize="22px"
                color={tokenData?.color ?? "#FFF"}
              >
                {tokenData
                  ? tokenData.name ?? "Invalid Address!"
                  : "Loading..."}
              </Heading>
            </>
          ) : null}

          <Center p={4} mt={isEmpty ? 4 : 0} width="100%">
            <Input
              width="100%"
              textAlign="center"
              placeholder={t(
                "Token Address: 0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
              )}
              height="40px"
              variant="filled"
              size="sm"
              value={tokenAddress}
              onChange={(event) => {
                const address = event.target.value;
                _setTokenAddress(address);
              }}
              {...DASHBOARD_BOX_PROPS}
              _placeholder={{ color: "#e0e0e0" }}
              _focus={{ bg: "#121212" }}
              _hover={{ bg: "#282727" }}
              bg="#282727"
            />

            {!existingAssets.some(
              // If ETH hasn't been added:
              (asset) => asset.underlyingToken === ETH_TOKEN_DATA.address
            ) ? (
              <DashboardBox
                flexShrink={0}
                as="button"
                ml={2}
                height="40px"
                borderRadius="10px"
                px={2}
                fontSize="sm"
                fontWeight="bold"
                onClick={() => _setTokenAddress(ETH_TOKEN_DATA.address)}
              >
                <Center expand>ETH</Center>
              </DashboardBox>
            ) : null}
          </Center>

          {tokenData?.symbol ? (
            <>
              <Box
                display="flex"
                height="100%"
                width="100%"
                flexDirection="column"
                justifyContent="flex-start"
                alignContent="flex-start"
                // bg="green"
              >
                <AssetSettings
                  mode="Adding"
                  comptrollerAddress={comptrollerAddress}
                  tokenData={tokenData}
                  tokenAddress={tokenAddress}
                  poolOracleAddress={poolOracleAddress}
                  oracleModel={oracleModel}
                  oracleData={oracleData}
                  closeModal={onClose}
                  poolName={poolName}
                  poolID={poolID}
                  existingAssets={existingAssets}
                />
              </Box>
            </>
          ) : null}
        </Column>
      </ModalContent>
    </Modal>
  );
}