@chakra-ui/react#Button TypeScript Examples

ResetSettings = (): JSX.Element => {
    const alertRef = useRef(null);
    const [requiresConfirmation, confirm] = useState((): string | null => {
        return null;
    });
    return (
        <Stack direction='column' p={5}>
            <Text fontSize='2xl'>Reset Settings</Text>
            <Divider orientation='horizontal' />
            <Spacer />
            <Button
                onClick={() => confirm('resetTutorial')}
            >
                Reset Tutorial
            </Button>
            <Button
                colorScheme={'red'}
                onClick={() => confirm('resetApp')}
            >
                Reset App
            </Button>

            <ConfirmationDialog
                modalRef={alertRef}
                onClose={() => confirm(null)}
                body={confirmationActions[requiresConfirmation as string]?.message}
                onAccept={() => {
                    confirmationActions[requiresConfirmation as string].func();
                }}
                isOpen={requiresConfirmation !== null}
            />
        </Stack>
    );
}

export default function NewTunnelButton() {
  const history = createHashHistory();

  function handleRedirect() {
    history.push("/new-tunnel");
  }

  return (
    <Button size="xs" w="100%" leftIcon={<FaPlus />} onClick={handleRedirect}>
      <Text fontSize="sm">New Tunnel</Text>
    </Button>
  );
}

export function CallButton(props: Props){
  return(
    <Button
      rightIcon={<MdCall/>}
      colorScheme="purple"
      variant="outline"
      cursor="pointer"
      onClick={props.onClick}>
        {props.text}
    </Button>
  )
}

function ApplyCouponButton(props: ApplyCouponButtonProps) {
  const {couponCode, onCouponApplied} = props
  const [isLoading, setIsLoading] = useState(false)

  function applyCoupon() {
    setIsLoading(true)
    const showCouponInputEle: HTMLButtonElement | null = document.querySelector('[data-purpose="no-coupon-button"]')

    if (showCouponInputEle) {
      showCouponInputEle.click()
    }
    const couponInputEle: HTMLInputElement | null = document.querySelector('[data-purpose="coupon-input"]');

    if (!couponInputEle) {
      console.error('unable to find the coupon input')
      return
    }

    changeInputValue(couponInputEle, couponCode)
    const couponSubmitButtonEle: HTMLButtonElement | null = document.querySelector('[data-purpose="coupon-submit"]')
    if (!couponSubmitButtonEle) {
      console.error('unable to find the coupon submit button')
      return;
    }
    couponSubmitButtonEle.click()
    onCouponApplied()
  }

  return (
    <Button
      isLoading={isLoading}
      loadingText="Applying"
      colorScheme="orange"
      size="lg"
      fontSize="2xl"
      variant="solid"
      onClick={applyCoupon}>Apply</Button>
  )
}

function MultiPickerButton({
  children,
  selected,
  onClick,
}: {
  children: ReactNode;
  selected: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}) {
  return (
    <Button
      colorScheme="black"
      variant={selected ? "solid" : "ghost"}
      borderRadius="full"
      onClick={onClick}
      bgColor={selected ? "#00C628" : "transparent"}
    >
      {children}
    </Button>
  );
}

AllDayDateTimeRangeAction = (props: DateTimeRangeActionProps): JSX.Element => {
  const { startDate, endDate, itemIndex, setDateRanges, dateRanges, targetPayload, targetUrl, submitChange, name } =
    props

  const handleButtonClick = (): void => {
    let newStartDate = null
    let newEndDate = null

    if (startDate) {
      newStartDate = new Date(startDate.getTime())
      newStartDate.setHours(0, 0, 0, 0)
    }
    if (endDate) {
      newEndDate = new Date(endDate.getTime())
      newEndDate.setHours(23, 59, 0, 0)
    }
    if (startDate !== newStartDate || endDate !== newEndDate) {
      const newDateRanges = dateRanges

      newDateRanges[itemIndex] = [newStartDate, newEndDate]
      setDateRanges(newDateRanges)

      const widgetPayload = getPayload(getInputPayload(newDateRanges), name, targetPayload)
      submitChange({ url: targetUrl, payload: widgetPayload })
    }
  }

  return (
    <Button colorScheme="brand" variant="outline" onClick={handleButtonClick}>
      Весь день
    </Button>
  )
}

DisconnectWallet = ({ onClose }: DisconnectWalletProps) => {
  const { account, deactivate } = useWeb3React();
  const onClickDisconnect = useCallback(() => {
    deactivate();
    onClose();
  }, [deactivate, onClose]);

  return (
    <Dialog onClose={onClose} icon="ethereum">
      <div
        css={css`
          display: flex;
          flex-direction: column;
          gap: 16px;
        `}
      >
        <h4>You Are Connected to DOPEWARS.EXE</h4>
        <div
          css={css`
            font-size: 12px;
          `}
        >
          {account && account.slice(0, 8)}...{account && account.slice(-8)}
        </div>
        <Button
          css={css`
            cursor: pointer;
          `}
          onClick={onClickDisconnect}
        >
          Disconnect ETH Wallet
        </Button>
      </div>
    </Dialog>
  );
}

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

ResetButton: FC<ResetButtonProps> = (props: ResetButtonProps) => {
  const { children, ...rest } = props;
  const { isSubmitting, dirty, resetForm } = useFormikContext();

  return (
    <Button
      colorScheme="teal"
      variant="outline"
      onClick={() => resetForm()}
      isDisabled={isSubmitting || !dirty}
      {...rest}
    >
      {/* TODO: This is not needed. */}
      {children}
    </Button>
  );
}

CopyButton = ({ copyText, buttonText = 'copy', ...props }) => {
  const { hasCopied, onCopy } = useClipboard(copyText);

  return (
    <Button onClick={onCopy} {...props}>
      {hasCopied ? 'copied' : buttonText}
    </Button>
  );
}

export function BlogCardPost({ post }: IBlogCardProps) {
  return (
    <Box maxW="sm" borderWidth="2px" borderRadius="lg" overflow="hidden" borderColor="orange.400">
      <Box p="4" as="a" display="block" href={`/blog/${post.slug}`}>
        <Heading as="h3" mb="2" size="md" color="orange.400" fontFamily="body">
          {post.title}
        </Heading>
        <Button leftIcon={<HiClock />} colorScheme="gray" variant="solid" size="xs">
          {post.date}
        </Button>
        <Text mt="4">{post.excerpt}</Text>
      </Box>
    </Box>
  )
}

UserForm = ({ initialValues, onSubmit }: IProps) => {
  const { register, formState, handleSubmit } = useForm<IFormValues>({
    defaultValues: initialValues,
    resolver: yupResolver(schema),
    mode: 'onChange',
  })

  return (
    <VStack
      as="form"
      onSubmit={handleSubmit(onSubmit)}
      spacing={4}
      width="100%"
    >
      <FormControl
        id="username"
        isInvalid={!!formState.errors.username?.message}
      >
        <FormLabel>Username</FormLabel>
        <Input name="username" ref={register} />
        <FormErrorMessage>
          {formState.errors.username?.message}
        </FormErrorMessage>
      </FormControl>
      <Button
        type="submit"
        colorScheme="blue"
        isLoading={formState.isSubmitting}
        disabled={!formState.isValid}
      >
        Submit
      </Button>
    </VStack>
  )
}

CodeSandboxButton = () => {
  const components = useSelector(getComponents)
  const [isLoading, setIsLoading] = useState(false)

  return (
    <Tooltip
      zIndex={100}
      hasArrow
      bg="yellow.100"
      aria-label="Builder mode help"
      label="Export in CodeSandbox"
    >
      <Button
        onClick={async () => {
          setIsLoading(true)
          const code = await generateCode(components)
          setIsLoading(false)
          const parameters = buildParameters(code)

          window.open(
            `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`,
            '_blank',
          )
        }}
        isLoading={isLoading}
        rightIcon={<ExternalLinkIcon path="" />}
        variant="ghost"
        size="xs"
      >
        Export code
      </Button>
    </Tooltip>
  )
}

ToggleColorModeButton: FC<ButtonProps> = (buttonProps) => {
    const { colorMode, toggleColorMode } = useColorMode();
    return (
        <Button
            aria-label="Toggle dark mode"
            onClick={toggleColorMode}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...buttonProps}
        >
            {colorMode === 'light' ? <SunIcon /> : <MoonIcon />}
        </Button>
    );
}

PrivateApiField = ({ helpText }: PrivateApiFieldProps): JSX.Element => {
    const privateApi: boolean = (useAppSelector(state => state.config.enable_private_api) ?? false);
    const alertRef = useRef(null);
    const [requiresConfirmation, confirm] = useState((): string | null => {
        return null;
    });

    return (
        <Box mt={1}>
            <PrivateApiRequirements />

            <FormControl mt={5}>
                <Stack direction='row'>
                    <Checkbox
                        id='enable_private_api'
                        isChecked={privateApi}
                        onChange={onCheckboxToggle}
                    >
                        Private API
                    </Checkbox>
                    <Button
                        size='xs'
                        onClick={() => confirm('reinstall')}
                    >
                        Re-install Helper
                    </Button>
                </Stack>
                <FormHelperText>
                    {helpText ?? (
                        <Text>
                            If you have set up the Private API features (via MacForge or MySIMBL),
                            enable this option to allow the server to communicate with the iMessage Private API.
                        </Text>
                    )}
                </FormHelperText>
            </FormControl>

            <ConfirmationDialog
                modalRef={alertRef}
                onClose={() => confirm(null)}
                body={confirmationActions[requiresConfirmation as string]?.message}
                onAccept={() => {
                    confirmationActions[requiresConfirmation as string].func();
                }}
                isOpen={requiresConfirmation !== null}
            />
        </Box>
    );
}

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

function AllCoupons() {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const btnRef = React.useRef<HTMLButtonElement>(null)

  const courses = useCourses()

  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        size={"4xl"}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay/>
        <DrawerContent>
          <DrawerCloseButton/>
          <DrawerBody>
            <Box my={9}>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">Premium courses with
                  discount</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.coursesWithCoupon)
                  .sort(([_, course]) => course.courseDetails.language === 'English' ? -1 : 1)
                  .map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
            <Box>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">More free courses</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.freeCourses).map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

export function FooterSignup() {
  return (
    <>
      <Heading fontSize="24px" mb="15px" className="yellow-gradient-color">
        Be the first to know
      </Heading>
      <Text color="gray.400" mb="15px">
        Get notified about the upcoming sessions, news, articles, jobs, and
        opensource projects.
      </Text>

      <form action="#">
        <Box position="relative">
          <Input
            type="email"
            isRequired
            name="entry.1808449400"
            px="25px"
            bg="gray.900"
            height="50px"
            rounded="50px"
            _placeholder={{ color: "gray.600" }}
            placeholder="Enter your email"
            _focus={{ outline: 0 }}
            color="gray.100"
            borderWidth={0}
          />
          <Button
            type="submit"
            height="50px"
            color="gray.100"
            _hover={{ bg: "yellow.400", color: "gray.900" }}
            position="absolute"
            top="0"
            right="0"
            bg="gray.700"
            rounded="50px"
            px="25px"
          >
            Subscribe
          </Button>
        </Box>
      </form>
    </>
  );
}

DropPlus: React.FunctionComponent<DropPlusProps> = (
	props: React.PropsWithChildren<DropPlusProps>
) => {
	const itemState = useState(props.itemStateProp);
	const parentState = useState(props.parentStateProp);
	const parentStateOrNull: State<JSONSchema7> | undefined = parentState.ornull;
	const propertiesOrNull:
		| State<{
				[key: string]: JSONSchema7Definition;
		  }>
		| undefined = parentStateOrNull.properties.ornull;

	const itemPropertiesOrNull:
		| State<{
				[key: string]: JSONSchema7Definition;
		  }>
		| undefined = itemState.properties.ornull;

	if (props.isDisabled) {
		return <div />;
	}

	if (!parentStateOrNull) {
		return <></>;
	}

	return (
		<Popover trigger="hover">
			<PopoverTrigger>
				<IconButton
					isRound
					size="sm"
					mt={2}
					mb={2}
					mr={2}
					variant="link"
					colorScheme="green"
					fontSize="16px"
					icon={<IoIosAddCircleOutline />}
					aria-label="Add Child Node"
				/>
			</PopoverTrigger>

			<PopoverContent border="0" zIndex={4} width="100px" color="white">
				<Stack>
					<Button
						colorScheme="blue"
						variant="outline"
						size="xs"
						onClick={() => {
							const fieldName = `field_${random()}`;
							propertiesOrNull
								?.nested(fieldName)
								.set(getDefaultSchema(DataType.string) as JSONSchema7);
						}}
					>
						Sibling Node
					</Button>
					<Button
						size="xs"
						colorScheme="orange"
						variant="outline"
						onClick={() => {
							if (itemState.properties) {
								const fieldName = `field_${random()}`;
								itemPropertiesOrNull
									?.nested(fieldName)
									.set(getDefaultSchema(DataType.string) as JSONSchema7);
							}
						}}
					>
						Child Node
					</Button>
				</Stack>
			</PopoverContent>
		</Popover>
	);
}

TransactionStepperModal = ({
  isOpen,
  onClose,
  activeStep,
  needsRetry,
  handleRetry,
}: {
  isOpen: boolean;
  onClose: () => void;
  activeStep: number;
  needsRetry: boolean;
  handleRetry: () => void;
}) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
      <ModalOverlay>
        <ModalContent
          {...MODAL_PROPS}
          display="flex"
          alignSelf="center"
          alignItems="center"
          justifyContent="center"
          height="25%"
          width="25%"
        >
          <Row
            mb={6}
            mainAxisAlignment="center"
            crossAxisAlignment="center"
            w="100%"
            px={4}
          >
            <Box mx="auto">
              <Text textAlign="center" fontSize="20px">
                {steps[activeStep]}
              </Text>
              {steps[activeStep] === "Deploying Pool!" ? (
                <Text fontSize="13px" opacity="0.8">
                  Will take two transactions, please wait.
                </Text>
              ) : null}
            </Box>
           
          </Row>
          <TransactionStepper
            steps={steps}
            activeStep={activeStep}
            tokenData={{ color: "#21C35E" }}
          />
          {needsRetry ? (
            <Button onClick={() => handleRetry()} mx={3} bg="#21C35E">
              {" "}
              Retry{" "}
            </Button>
          ) : null}
        </ModalContent>
      </ModalOverlay>
    </Modal>
  );
}

ToListViewLink = ({ name }: { name: string }): JSX.Element => (
  <Button leftIcon={<ArrowLeft size="1em" />} as={Link} to={`/${name}/`} colorScheme="brand" variant="outline">
    К списку
  </Button>
)

export default function Home() {
  const { isError, gardens, error } = useDendronGardens();
  if (isError) return <div>failed to load: {JSON.stringify(error)}</div>;
  let extra: any;
  // if (_.isEmpty(gardens)) {
  //   extra = <Button>New Garden from Git</Button>;
  // }
  if (_.isEmpty(gardens)) {
    extra = (
      <Box maxW="32rem">
        <VStack spacing={4} align="stretch">
          <Center>
            <Heading mb={4}>Welcome to Dendron</Heading>
          </Center>
          <Text fontSize="xl">
            If you haven&apos;t already done so, you can install Dendron by following
            the instructions &nbsp;
            <Link
              href="https://dendron.so/notes/678c77d9-ef2c-4537-97b5-64556d6337f1.html"
              isExternal
            >
              here
            </Link>
          </Text>
          <Button>Publish a new site from Git (coming soon) </Button>
        </VStack>
      </Box>
    );
  }
  return (
    <>
      <Head>
        <title>Dendron</title>
        <link rel="icon" href="/favicon.ico" />
        <script type="text/javascript" src="/static/memberful.js" />
      </Head>

      <Grid justifyContent="center">{extra}</Grid>
    </>
  );
}

ColorPicker = ({ colors, selectedColor, changeCallback }: ColorPickerProps) => {
  const [color, setColor] = useState(selectedColor ?? colors[0]);

  const handleColorInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    handleColorChange(e.target.value);
  };

  const handleColorChange = (color: string) => {
    setColor(color);
    if (typeof changeCallback === 'function') changeCallback(color);
  };

  return (
    <>
      <Popover variant="picker">
        <PopoverTrigger>
          <Button
            aria-label={color}
            background={color}
            height="64px"
            width="64px"
            padding={0}
            minWidth="unset"
            borderRadius={3}
          ></Button>
        </PopoverTrigger>
        <PopoverContent width="196px">
          <PopoverArrow bg={color} />
          <PopoverCloseButton color="white" />
          <PopoverHeader
            height="100px"
            backgroundColor={color}
            borderTopLeftRadius={5}
            borderTopRightRadius={5}
            color="white"
          >
            <Center height="100%">{color}</Center>
          </PopoverHeader>
          <PopoverBody height="96px">
            <SimpleGrid columns={5} spacing={2}>
              {colors.map(c => (
                <Button
                  key={c}
                  aria-label={c}
                  background={c}
                  height="32px"
                  width="32px"
                  padding={0}
                  minWidth="unset"
                  borderRadius={3}
                  _hover={{ background: c }}
                  onClick={() => {
                    handleColorChange(c);
                  }}
                ></Button>
              ))}
            </SimpleGrid>
            <Input
              borderRadius={3}
              marginTop={3}
              placeholder="red.100"
              size="sm"
              value={color}
              onChange={handleColorInputChange}
            />
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}

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

AppSettingsMenu = ({ app }: AppSettingsMenuProps) => {
  const location = useLocation();

  const selectedRoute = location.pathname.endsWith('/settings/ports')
    ? 'ports'
    : location.pathname.endsWith('/settings/domains')
    ? 'domains'
    : location.pathname.endsWith('/settings/advanced')
    ? 'advanced'
    : 'index';

  return (
    <VStack align="stretch">
      <Button
        variant="ghost"
        justifyContent="left"
        isActive={selectedRoute === 'ports'}
        as={Link}
        to={`/app/${app.id}/settings/ports`}
      >
        Port Management
      </Button>
      <Button
        variant="ghost"
        justifyContent="left"
        isActive={selectedRoute === 'domains'}
        as={Link}
        to={`/app/${app.id}/settings/domains`}
      >
        Domains
      </Button>
      <Button
        variant="ghost"
        justifyContent="left"
        isActive={selectedRoute === 'advanced'}
        as={Link}
        to={`/app/${app.id}/settings/advanced`}
      >
        Advanced
      </Button>
    </VStack>
  );
}

export function useButton(onClickHandler, label: string) {
    const [loading, setLoading] = useState(false)
    const button = <Button isFullWidth isLoading={loading}
        spinner={<BeatLoader size={8} color="grey" />}
        onClick={async () => { setLoading(true); await onClickHandler(); setLoading(false) }}>{label}</Button>
    return [loading, button]
}

export function IconCustomizerDrawer() {
  const [showCustomize, setShowCustomize] = useState(false);
  const { color, setColor, size, setSize, strokeWidth, setStroke, resetStyle } = useContext(IconStyleContext);

  return (
    <>
      <Button as="a" leftIcon={<Edit />} size="lg" onClick={() => setShowCustomize(true)}>
        Customize
      </Button>
      <Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Customize Icons</DrawerHeader>

          <DrawerBody>
            <Grid gridGap={'1em'}>
              <FormControl>
                <ColorPicker
                  color={color}
                  value={color}
                  onChangeComplete={(col) => setColor(col.hex)}
                />
              </FormControl>
              <FormControl>
                <FormLabel htmlFor="stroke">
                  <Flex>
                    <Text flexGrow={1} fontWeight={'bold'}>
                      Stroke
                    </Text>
                    <Text>{strokeWidth}px</Text>
                  </Flex>
                </FormLabel>
                <Slider
                  value={strokeWidth}
                  onChange={setStroke}
                  min={0.5}
                  max={3}
                  step={0.5}
                  name={'stroke'}
                >
                  <SliderTrack>
                    <SliderFilledTrack bg={color} />
                  </SliderTrack>
                  <SliderThumb />
                </Slider>
              </FormControl>
              <FormControl>
                <FormLabel htmlFor="size">
                  <Flex>
                    <Text flexGrow={1} fontWeight={'bold'}>
                      Size
                    </Text>
                    <Text>{size}px</Text>
                  </Flex>
                </FormLabel>
                <Slider value={size} onChange={setSize} min={12} max={64} step={1} name={'size'}>
                  <SliderTrack>
                    <SliderFilledTrack bg={color} />
                  </SliderTrack>
                  <SliderThumb />
                </Slider>
              </FormControl>
              <FormControl>
                <Button onClick={resetStyle}>Reset</Button>
              </FormControl>
            </Grid>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}

export function ErrorDataNotFound({ title, useCta, ctaAction, ctaText }: IErrorDataNotFoundProps) {
  return (
    <Box width="100%">
      <Stack as="section" mx={'auto'} maxW={'lg'} align={'center'}>
        <Stack align={'center'} spacing={8}>
          <Heading
            fontWeight={700}
            fontSize={{ base: 'xl', md: '2xl' }}
            lineHeight={'110%'}
            textAlign="center"
            as="h3"
          >
            {title}
          </Heading>
          <Image
            width={400}
            height={400}
            src={'/images/illustrations/ill_data_by_manypixels.svg'}
            alt="man with Data"
          />

          {useCta && (
            <Button
              px={6}
              size="lg"
              color={'white'}
              bg="orange.400"
              _hover={{
                bg: 'orange.500'
              }}
              onClick={ctaAction}
            >
              {ctaText}
            </Button>
          )}
        </Stack>
      </Stack>
    </Box>
  )
}