@chakra-ui/react#Button JavaScript Examples

VulnerabilityCategoryAddModalDialog = ({ isOpen, onClose, onCancel }) => {
    const emptyCategory = { name: '', description: '' };
    const [newCategory, updateNewCategory] = useState(emptyCategory);

    const onCreateCategoryFormSubmit = ev => {
        if (!document.getElementById('vulnerability_category_form').checkValidity()) {
            return false;
        }

        ev.preventDefault();

        secureApiFetch(`/vulnerabilities/categories`, {
            method: 'POST',
            body: JSON.stringify(newCategory)
        }).then(() => {
            onClose();
            actionCompletedToast(`The vulnerability category has been created.`);
        })
            .finally(() => {
                updateNewCategory(emptyCategory)
            })
    }

    return <Modal size="xl" isOpen={isOpen} onClose={onCancel}>
        <ModalOverlay />
        <ModalContent>
            <ModalHeader>New vulnerability category details</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                <VulnerabilityCategoryForm category={newCategory} onFormSubmit={onCreateCategoryFormSubmit} categorySetter={updateNewCategory} />
            </ModalBody>

            <ModalFooter>
                <Button onClick={onCancel} mr={3}>Cancel</Button>
                <Button type="submit" form="vulnerability_category_form" colorScheme="blue" onClick={onCreateCategoryFormSubmit}>Save</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>
}

function NavHeader() {
  return (
    <Box className="nav_header" p={1}>
      <Flex direction="row " >
        <img src={logo} alt="heading" width="100px"  className="logo"/>
        <Spacer />
        <Stack direction="row" spacing={2}>
          <Link to="/">
            <Button leftIcon={<GrHome />} colorScheme="pink" variant="solid" className="home">
              Home
            </Button>
          </Link>
        </Stack>
      </Flex>
    </Box>
  );
}

CallForPaperButton = ({ startDate, endDate, cfpId, ...rest }) => {
  // Check if we not are between the start and end date of the CFP.
  if (dayjs().isBefore(dayjs(startDate)) || dayjs().isAfter(dayjs(endDate))) {
    return null;
  }

  return (
    <Button
      as="a"
      href={`https://conference-hall.io/public/event/${cfpId}`}
      target="_blank"
      rel="noopener noreferrer"
      {...rest}
    >
      Call For Paper
    </Button>
  );
}

MFModal = (children) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen} colorScheme="pink">Delegate application</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalCloseButton />
          <ModalBody>{children}</ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}

Links = () => (
  <Stack>
    {links.map((link) => (
      <Link href={link.href} key={link.display} isExternal>
        <Button colorScheme="teal">{link.display}</Button>
      </Link>
    ))}
  </Stack>
)

ProfileMenu = () => {
  return (
    <Menu>
      <MenuButton
        as={Button}
        rounded={'full'}
        variant={'link'}
        cursor={'pointer'}
        aria-label="Profile"
      >
        <Avatar
          size={'sm'}
          src={
            'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
          }
          alt="user"
        />
      </MenuButton>
      <MenuList>
        <MenuItem>Link 1</MenuItem>
        <MenuItem>Link 2</MenuItem>
        <MenuDivider />
        <MenuItem>Link 3</MenuItem>
      </MenuList>
    </Menu>
  );
}

function ExportLogs({getLogs, ...props}) {
  const {t} = useTranslation()

  return (
    <Section title={t('Logs')} w={['100%', '480px']} {...props}>
      <Divider />
      <Flex justify="space-between" align="center" py={6}>
        <Flex>
          <LogsIcon h={5} w={5} />
          <Text ml={3} fontSize="mdx" fontWeight={500}>
            {t('Validation logs')}
          </Text>
        </Flex>
        <Flex align="center">
          <Button variant="link" color="blue.500" onClick={getLogs}>
            {t('Export')}
          </Button>
        </Flex>
      </Flex>
      <Divider />
    </Section>
  )
}

Podcast = ({ podcast }) => {
  const { title, itunesId, description, artwork, categories } = podcast
  const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE)
  return (
    <Flex rounded="lg" borderWidth="2px" m={4}>
      <Box width="200px">
        <Image src={artwork} boxSize="200px" />
        <Button
          width="100%"
          onClick={() =>
            subscribeMutation({ variables: { itunesID: itunesId } })
          }
        >
          <AddIcon />
        </Button>
      </Box>
      <Box m={4} maxWidth="300px">
        <Heading noOfLines={2}>{title}</Heading>
        <Text noOfLines={3}>{description}</Text>
        <Stack isInline>
          {categories.slice(0, 3).map((c) => {
            return <Tag key={c}>{c}</Tag>
          })}
        </Stack>
      </Box>
    </Flex>
  )
}

Ding = ({ isSelected, activeComp, label, Icon, ...props }) => (
  <Button
    variant="unstyled"
    p="2"
    h="auto"
    pos="relative"
    opacity={isSelected ? 1 : 0.4}
    _hover={{ opacity: 1 }}
    _focus={{ outline: 'none' }}
    {...props}
  >
    <Flex direction="column" align="center">
      <Icon fontSize="2xl" color="gray.600" _dark={{ color: 'gray.300' }} />
      <Text fontSize="sm" fontWeight="normal" variant="subtle" mt="2">
        {label}
      </Text>
      <Box
        pos="absolute"
        bottom="-10px"
        w="full"
        display="flex"
        justifyContent="center"
        px="3"
      >
        {isSelected && activeComp}
      </Box>
    </Flex>
  </Button>
)

BuildCard = ({ build }) => {
  const { borderColor, secondaryFontColor } = useCustomColorModes();
  return (
    <Box borderWidth="1px" borderRadius="lg" borderColor={borderColor} overflow="hidden">
      <Box bgColor={borderColor} borderBottom="1px" borderColor={borderColor}>
        <Image src={`${ASSETS_BASE_URL}/${build.image}`} h="200px" mx="auto" />
      </Box>
      <Flex pt={9} pb={4} px={4} direction="column" minH="240px">
        <Text fontWeight="bold">{build.name}</Text>
        <Text color={secondaryFontColor}>{build.desc}</Text>
        <Spacer />
        <ButtonGroup variant="outline" size="sm" spacing="2">
          <Button disabled variant="outline" isFullWidth>
            Fund
          </Button>
          <Button isFullWidth as="a" href={build.branch} target="_blank" rel="noopener noreferrer">
            Fork
          </Button>
        </ButtonGroup>
      </Flex>
    </Box>
  );
}

SystemLogsPage = () => {
    const [logs, fetchLogs] = useFetch('/system/logs', true);

    const isLoading = null === logs;

    return <div style={{ height: '100%' }}>
        <div className='heading'>
            <Breadcrumb />
        </div>
        <Title type="System" title="Logs" icon={<IconDownloadDocument />} />

        <Button leftIcon={<FontAwesomeIcon icon={faRefresh} />} onClick={fetchLogs} disabled={isLoading}>Refresh</Button>
        <Textarea variant="filled" size="sm" style={{ height: '100%' }} value={isLoading ? "Loading..." : logs} isReadOnly />
    </div>
}

export default function Messages() {
  const { username, loadingInitial, error, getMessagesAndSubscribe, messages } =
    useAppContext();
  const reversed = [...messages].reverse();
  if (loadingInitial)
    return (
      <Box textAlign="center">
        <Spinner />
      </Box>
    );
  if (error)
    return (
      <Alert status="error" mt="20px">
        {error}
        <Button
          ml="5px"
          onClick={getMessagesAndSubscribe}
          colorScheme="red"
          variant="link"
        >
          try to reconnect
        </Button>
      </Alert>
    );

  if (!messages.length)
    return (
      <Box as="h3" textAlign="center">
        No messages ?
      </Box>
    );

  return reversed.map((message) => {
    const isYou = message.username === username;
    return <Message key={message.id} message={message} isYou={isYou} />;
  });
}

function DeleteTodo({id}) {
  const {fetchTodos} = React.useContext(TodosContext)

  const deleteTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: { "id": id }
    })
    await fetchTodos()
  }

  return (
    <Button h="1.5rem" size="sm" onClick={deleteTodo}>Delete Todo</Button>
  )
}

function MenuButtons({link,icon,Tittle,click ,nextPage}) {
    return (
        <div> 
            <a link={nextPage} target="_blank">

     <Link to={link} onClick={click}>
        <Button ml="1%" mt="5%" width="100%">
            
              {icon}
            <Text fontSize="xl" ml="4">
            {Tittle}
            </Text>
        </Button>
       </Link>
            
            </a>
        </div>
    );
}

export default function Forget() {
    return (
      <>
      <Navbar />
        <div className="login">
      <div className="login__container">
        <div className="login__containerTop">
          <div className="login__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="login__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              FORGET PASSWORD
            </Heading>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input  required
                borderRadius="full"
                type="tel"
                placeholder="Email Address"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="login__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                type="tel" required
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <HStack className="login__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="loginBtn"
              >
                SUBMIT
              </Button>
              <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Remember?</a>
              </Link>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
    )
}

function Header(props) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	const web3Context = useContext(Web3Context);
	const { connectWallet, signerAddress, checkIfMemberExists } = web3Context;

	function connect() {
		connectWallet().then(async (data) => {
			console.log(data.provider.networkVersion);
			if (data.provider.networkVersion == "80001") {
				checkIfMemberExists(data).then((value) => {
					if (value === true) {
						props.setIsMember(true);
					}
				});
			} else {
				onOpen();
			}
		});
	}

	return (
		<HStack
			backgroundColor='white'
			zIndex='1'
			position='fixed'
			width='100vw'
			boxShadow='base'
			px='250px'
			py={3}>
			<Modal
				isOpen={isOpen}
				onClose={onClose}
				closeOnOverlayClick={false}>
				<ModalOverlay />
				<ModalContent>
					<ModalHeader>Invalid Network</ModalHeader>
					<ModalBody>Please connect to Mumbai Testnet.</ModalBody>
				</ModalContent>
			</Modal>
			<Link to='/'>
				<Image height='35px' src='../assets/DAOInsure.png' />
			</Link>
			<Spacer />
			<Link to='/profile'>
				<Button colorScheme='whatsapp'>Profile</Button>
			</Link>
			<Link to='/activity'>
				<Button colorScheme='whatsapp'>Activity</Button>
			</Link>

			{signerAddress !== "" && signerAddress !== undefined ? (
				<Button colorScheme='whatsapp' variant='solid'>
					{`${signerAddress.substr(0, 6)}...${signerAddress.substr(
						-6
					)}`}
				</Button>
			) : (
				<Button
					onClick={connect}
					colorScheme='whatsapp'
					variant='solid'>
					Connect Wallet
				</Button>
			)}
		</HStack>
	);
}

HomeSection = () => {
  const ref = useRef(null);
  const onScreen = useOnScreen(ref);
  const buttonSize = useBreakpointValue({ base: 'sm', md: 'lg' })


  return (
    <Box
      as="section"
      id="home"
      alignContent="center"
      justifyContent="flex-start"
    >
      <Box
        ref={ref}
        position="relative"
        className="__content"
        maxW={{base: '100%', md: "2xl"}}
        opacity={onScreen ? 1 : 0}
        transform={`translate3d(${onScreen ? 0 : "-70px"}, 0, 0)`}
        transition="transform 0.3s 0.4s ease-in-out, opacity 0.6s 0.5s ease-in"

      >
        <Box
          d="inline-flex"
          flexFlow="column-reverse wrap"
          alignItems="flex-start"
          width="auto"
        >
          <Text
            as="h1"
            className="gradient-cone"
            lineHeight={1}
            overflow="visible"
            sx={{
              position: "relative",
              fontWeight: 700,
              mb: 0,
              strong: {
                d: "block",
                fontWeight: 700,
              },
              em: {
                fontStyle: "normal",
              },
            }}
          >
            MetaFest2
          </Text>
          <span className="fest-dates">9th - 23rd JUNE</span>
        </Box>
        <Box className="__content__body" maxW={{base: '66vw', lg: 'unset'}}>
          <Text as="p" fontWeight={300} mt={-2}>
            powered by{" "}
            <Text as="strong" className="gradient">
              MetaGame
            </Text>
          </Text>
          <Text as="p" fontSize="1.5vmax" mt={{base: 3, md: 6}} fontWeight={500}>
            A virtual festival &amp; conference.
          </Text>
          <Text as="p" fontSize={{base: '3vmin', lg: 'inherit' }} >
            The goal? To help you{" "}
            <Text as="span" className="gradient">
              level up
            </Text>{" "}
            &{" "}
            <Text as="span" className="gradient">
              manifest a better future
            </Text>
            .
          </Text>
          <HStack mt={5}>
            <Link href="#apply"><Button colorScheme="pink" bg="#FF61E6" size={buttonSize}>Apply</Button></Link>
          </HStack>
        </Box>
      </Box>
    </Box>
  );
}

LikeCounter = ({ id }) => {
    const [likes, setLikes] = useState('')
    const [loading, setLoading] = useState(false)
    const [liked, setLiked] = useState(false)
    const [color, setColor] = useState('gray')
    const toast = useToast()

    useEffect(() => {
        const onLikes = (newLikes) => setLikes(newLikes.val())
        let db

        const fetchData = async () => {
            db = await loadDb()
            db.ref('likes').child(id).on('value', onLikes)
        }

        fetchData()

        return () => {
            if (db) {
                db.ref('likes').child(id).off('value', onLikes)
            }
        }
    }, [id])

    const like = async (e) => {
        if (!liked) {
            e.preventDefault()
            setLoading(true)
            const registerLike = () =>
                fetch(`/api/increment-likes?id=${encodeURIComponent(id)}`)

            registerLike()
            setLoading(false)
            setLiked(true)
            setColor('yellow.500')
            toast({
                title: "Thanks for liking!",
                status: "success",
                duration: 3000,
                isClosable: true,
            })
        } else {
            toast({
                title: "Already Liked!",
                status: "error",
                duration: 3000,
                isClosable: true,
            })
        }

    }

    return (
        <>
            <ButtonGroup>
                <Button
                    leftIcon={<BiLike />}
                    colorScheme="gray"
                    variant="outline"
                    onClick={like}
                    isLoading={loading}
                    color={color}
                    fontSize="sm"
                    px={2}
                >
                    {likes ? format(likes) : '–––'}
                </Button>
            </ButtonGroup>
        </>
    )
}

Cart = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const cartItems = useSelector(state => state.cart.cartItems);

  const viewProductDetails = (e, item) => {
    navigate(`/product/${item.id}`);
  };

  const deleteItem = (e, item) => {
    e.stopPropagation();
    e.preventDefault();
    dispatch(deleteItemFromCart(item));
  };

  if (cartItems.length === 0) {
    return (
      <Flex>
        <Box
          m={4}
          w="100%"
          fontWeight="semibold"
          letterSpacing="wide"
          textAlign="center"
        >
          You cart empty :(
        </Box>
      </Flex>
    );
  }
  return (
    <Box m={3} p={3}>
      <Table variant="simple">
        <Thead>
          <Tr>
            <Th>#</Th>
            <Th>Image</Th>
            <Th>Title</Th>
            <Th isNumeric>Price</Th>
            <Th isNumeric>Quantity</Th>
            <Th>Action</Th>
          </Tr>
        </Thead>
        <Tbody>
          {cartItems.map((item, index) => (
            <Tr key={item.id} onClick={e => viewProductDetails(e, item)}>
              <Td>{index + 1}</Td>
              <Td>
                <Avatar size={'sm'} src={item.image} alt={item.title} />
              </Td>
              <Td>{item.title}</Td>
              <Td isNumeric>
                ${parseFloat(item.price * item.quantity).toFixed(2)}
              </Td>
              <Td isNumeric>{item.quantity}</Td>
              <Td>
                <Button onClick={e => deleteItem(e, item)}>Delete</Button>
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </Box>
  );
}

News = React.memo(({ title, date, image, link }) => {
  const [stateOpen, setOpen] = useState(false);

  function handleToggle() {
    setOpen(!stateOpen);
  }

  return (
    <AnimateSharedLayout type="crossfade">
      <motion.div
        layoutId="data"
        whileHover={{ scale: 1.1, opacity: 0.9 }}
        className={styles.news}
      >
        <div
          style={{
            color: "black",
            borderColor: `transparent ${randomcolor()} transparent transparent`,
          }}
          className={styles.news_corner}
        >
          <span>hiru</span>
        </div>
        <div className={styles.left_col}>
          <img src={image} />
        </div>
        <div className={styles.right_col}>
          <div className={styles.news_title}>
            <span className={styles.title_wrapper}>{title}</span>
          </div>

          <div>
            <div className={styles.buttons}>
              <div>
                <Button colorScheme="teal" size="xs" onClick={handleToggle}>
                  Read More
                </Button>
              </div>
              <div>
                <Link href={link}>
                  <Button colorScheme="teal" size="xs" variant="outline">
                    Source
                  </Button>
                </Link>
              </div>
            </div>
            <div className={styles.date}>{date}</div>
          </div>
        </div>
      </motion.div>
      {stateOpen && (
        <motion.div
          onClick={handleToggle}
          layoutId="data"
          className={styles.modal_window}
        >
          <span className={styles.body_text}>
            But a community is only as robust as the dedication of its members.
            Whether people will actually want to use a site that does away with
            so many of the familiar features of major social media networks
            remains to be seen.
          </span>
        </motion.div>
      )}
    </AnimateSharedLayout>
  );
})

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

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

Hint = ({ text }) => (
  <Popover autoFocus={false}>
    <PopoverTrigger>
      <Button
        bg="transparent"
        p="0"
        h="auto"
        color="gray.400"
        _hover={{ bg: 'transparent', color: 'gray.600' }}
        _focus={{ outline: 'none' }}
      >
        <QuestionIcon />
      </Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverArrow />
      <PopoverCloseButton />
      <PopoverBody>
        <Text variant="subtle" fontSize="sm" p="3">
          {text}
        </Text>
      </PopoverBody>
    </PopoverContent>
  </Popover>
)

export default function BuildReviewRow({ build, isLoading, approveClick, rejectClick }) {
  return (
    <Tr>
      <Td>
        <Link as={RouteLink} to={`/builders/${build.address}`} pos="relative">
          <Address address={build.address} w="12.5" fontSize="16" />
        </Link>
      </Td>
      <Td>{build.name}</Td>
      <Td>{build.desc}</Td>
      <Td>
        <Link href={build.branch} color="teal.500" target="_blank" rel="noopener noreferrer">
          {build.branch}
        </Link>
      </Td>
      <Td>
        <DateWithTooltip timestamp={build.submittedTimestamp} />
      </Td>
      <Td>
        <HStack spacing={3}>
          <Button
            type="button"
            colorScheme="red"
            disabled={isLoading}
            className="danger"
            onClick={() => rejectClick(build.address, build.id)}
            size="xs"
          >
            Reject
          </Button>
          <Button
            type="button"
            colorScheme="green"
            disabled={isLoading}
            style={{ marginRight: 10 }}
            onClick={() => approveClick(build.address, build.id)}
            size="xs"
          >
            Approve
          </Button>
        </HStack>
      </Td>
    </Tr>
  );
}

CommandInstructions = ({ command, task = null }) => {
    const [commandArgsRendered, setCommandArgsRendered] = useState('');
    const [commandArgs, setCommandArgs] = useState({});
    const usesContainer = command.executable_type === 'rmap';
    const [showTerminal, setShowTerminal] = useState(false);

    const onArgUpdate = ev => {
        setCommandArgs({ ...commandArgs, [ev.target.name]: { name: ev.target.name, placeholder: ev.target.value } });
    };

    const runOnTerminal = ev => {
        setShowTerminal(true);
    }

    useEffect(() => {
        if (commandArgs !== null) {
            const commandArgsRendered = CommandService.renderArguments(command, commandArgs);
            setCommandArgsRendered(commandArgsRendered);
        }
    }, [commandArgs, command]);

    useEffect(() => {
        if (command) {
            const commandArgsParsed = parseArguments(command);
            setCommandArgs(commandArgsParsed);
        }
    }, [command]);

    if (!CommandService.hasCommand(command)) {

        return <p>This command has no instructions defined.</p>
    }

    return <>
        <h4>Instructions for command "{command.name}"</h4>

        <h4>1. Fill in the arguments</h4>
        {Object.keys(commandArgs).length > 0 &&
            Object.keys(commandArgs).map((key) =>
                <p key={`command_${key}`}>
                    <label htmlFor='commandArg'>
                        {commandArgs[key].name}
                    </label> <br />
                    <Input id='commandArg' name={commandArgs[key].name} value={commandArgs[key].placeholder} onChange={onArgUpdate} />
                </p>
            )
        }
        {Object.keys(commandArgs).length === 0 && <p>No arguments required.</p>}
        <h4>2. Execute <strong>rmap</strong> on any terminal</h4>
        <div>
            Make sure you have a copy of <strong>rmap</strong> on a machine you trust. Download the CLI for Macos/Linux and Windows from <ExternalLink href={CliDownloadUrl}>Github</ExternalLink>.<br />
            Once <strong>rmap</strong> is within reach execute the command shown below.
            <ShellCommand>{CommandService.generateEntryPoint(command, task)} {commandArgsRendered}</ShellCommand>

            <Button onClick={runOnTerminal}>Run on a browser terminal</Button>

            {showTerminal && <CommandTerminal commands={[CommandService.generateEntryPoint(command, task) + " " + commandArgsRendered]} />}
        </div>

        {task && command.output_filename && <>
            <h4>3. Wait for results</h4>

            <div>The <strong>rmap</strong> command will automatically capture the output of the previous command and upload it to the server for analysis. If there are new hosts discovered, or new vulnerabilities detected, they will be reported in the dashboard.</div>
        </>}

        {usesContainer && <Help title='How does it work?'>
            Reconmap will invoke the command <strong>{command.name}</strong> from a <strong>{command.docker_image}</strong> container using the arguments <strong>{command.arguments}</strong> and upload the results to this server for analysis.
        </Help>
        }
    </>
}

export default function Header() {
  const { username, setUsername, auth, randomUsername } = useAppContext();
  return (
    <Grid
      templateColumns="max-content 1fr min-content"
      justifyItems="center"
      alignItems="center"
      bg="white"
      position="sticky"
      top="0"
      zIndex="10"
      borderBottom="20px solid #edf2f7"
    >
      <GridItem justifySelf="start" m="2">
        <Image src="/logo.png" height="30px" ml="2" />
      </GridItem>
      {auth.user() ? (
        <>
          <GridItem justifySelf="end" alignSelf="center" mr="4">
            Welcome <strong>{username}</strong>
          </GridItem>
          <Button
            marginRight="4"
            size="sm"
            variant="link"
            onClick={() => {
              const { error } = auth.signOut();
              if (error) return console.error("error signOut", error);
              const username = randomUsername();
              setUsername(username);
              localStorage.setItem("username", username);
            }}
          >
            Log out
          </Button>
        </>
      ) : (
        <>
          <GridItem justifySelf="end" alignSelf="end">
            <NameForm username={username} setUsername={setUsername} />
          </GridItem>
          <Button
            size="sm"
            marginRight="2"
            colorScheme="teal"
            rightIcon={<FaGithub />}
            variant="outline"
            onClick={() =>
              auth.signIn({
                provider: "github",
              })
            }
          >
            Login
          </Button>
        </>
      )}
    </Grid>
  );
}

export default function About() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <div>
      <Button onClick={onOpen} colorScheme="orange">
        Learn More
      </Button>

      <Modal onClose={onClose} isOpen={isOpen} isCentered>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>American Sign Language (ASL)</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text fontSize="sm">
              American Sign Language (ASL) is a visual language that serves as
              the predominant sign language of Deaf communities in the United
              States and most of Canada.<br></br>
              Here's the list of ASL hand gestures for alphabet.
            </Text>
            <Image src={handImages} />
            <Text fontSize="sm">
              This sign language illustration is created by{" "}
              <Link
                href="https://thenounproject.com/pelodrome/"
                isExternal
                color="orange.300"
              >
                Pelin Kahraman
              </Link>
            </Text>
          </ModalBody>
          <ModalFooter>
            <Button onClick={onClose}>Close</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  )
}

Component = () => {
  const data = { nodes };

  const chakraTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(chakraTheme);

  const [columns, setColumns] = React.useState([
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ]);

  const handleOrder = () => {
    setColumns([...columns].sort(() => 0.5 - Math.random()));
  };

  return (
    <>
      <Button colorScheme="teal" onClick={handleOrder}>
        Shuffle
      </Button>
      <br />

      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable columns={columns} data={data} theme={theme} />
      </Box>

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}

function UpdateTodo({item, id}) {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const [todo, setTodo] = useState(item)
  const {fetchTodos} = React.useContext(TodosContext)

  const updateTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ item: todo })
    })
    onClose()
    await fetchTodos()
  }

  return (
    <>
      <Button h="1.5rem" size="sm" onClick={onOpen}>Update Todo</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay/>
        <ModalContent>
          <ModalHeader>Update Todo</ModalHeader>
          <ModalCloseButton/>
          <ModalBody>
            <InputGroup size="md">
              <Input
                pr="4.5rem"
                type="text"
                placeholder="Add a todo item"
                aria-label="Add a todo item"
                value={todo}
                onChange={e => setTodo(e.target.value)}
              />
            </InputGroup>
          </ModalBody>

          <ModalFooter>
            <Button h="1.5rem" size="sm" onClick={updateTodo}>Update Todo</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

function Register() {
  return (
    <>
    <Navbar />
    <div className="Register">
      <div className="Register__container">
        <div className="Register__containerTop">
          <div className="Register__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="Register__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              Register HERE
            </Heading>
            <InputGroup w="95%" borderRadius="full">
              <Input
                borderRadius="full"
                type="tel"
                placeholder="First Name"
                bgColor="gray.200"
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Last Name"
                bgColor="gray.200"
                marginLeft="4px"
              />
            </InputGroup>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillPersonFill color="#C6C6E8" fontSize="1.6rem" />
                }
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Username"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder=" Confirm Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Have Account?</a>
              </Link>
            <HStack className="Register__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="RegisterBtn"
              >
                Register
              </Button>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
  );
}