react-icons/fi#FiCheckCircle JavaScript Examples

The following examples show how to use react-icons/fi#FiCheckCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SingleApp.js    From winstall with GNU General Public License v3.0 6 votes vote down vote up 
Copy = ({ id, version, latestVersion }) => {
  const [showingCheck, setShowingCheck] = useState(false);

  let str = `winget install --id=${id} ${version == latestVersion ? "" : `-v "${version}"`} -e`;
  
  return (
    <div
      className={`${styles.copy} ${showingCheck ? styles.active : ""}`}
      onClick={() => {
        navigator.clipboard.writeText(str);
        setShowingCheck(true);
        setTimeout(() => {
          setShowingCheck(false);
        }, 2000);
      }}
    >
      <FiTerminal size={20} />
      {!showingCheck && (
        <>
          <span className={styles.installCommand}>{str}</span>
          <FiCopy className={styles.clipboard} size={16} />
        </>
      )}
      {showingCheck && (
        <>
          <span className={styles.copiedText}>Copied!</span>
          <FiCheckCircle className={styles.clipboard} size={16} />
        </>
      )}
    </div>
  );
}
Example #2
Source File: modalSuccess.js    From dashboard-reactjs with MIT License 6 votes vote down vote up 
function ModalSuccess({ isOpen, toggleModal }) {


    return (

        <StyledModal
            isOpen={isOpen}
            onBackgroundClick={toggleModal}
            onEscapeKeydown={toggleModal}
        >
            <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLabel">Success</h5>
                <button type="button" className="close" onClick={toggleModal}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div className="modal-body">
                <div className="icon">
                    <FiCheckCircle size="5em"/>
                </div>
                <h1>Success !</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eligendi numquam eveniet quidem nobis at quisquam blanditiis cum nihil nemo, alias assumenda soluta hic. Id mollitia error rem fugit dolor?</p>
                <div className="link">

                </div>
            </div>
        </StyledModal>
    );

}
Example #3
Source File: InfoItem.js    From sailplane-web with GNU General Public License v3.0 5 votes vote down vote up 
export default function InfoItem({title}) {
  return (
    <div style={styles.infoItem}>
      <FiCheckCircle color={primary45} size={16} style={styles.icon} />
      <span>{title}</span>
    </div>
  );
}
Example #4
Source File: index.js    From dashboard-reactjs with MIT License 4 votes vote down vote up 
export default function ButtonsPage() {
    useEffect(() => {
        document.title = 'Buttons'
    }, []);

    return (
        <>
            <div className="col-12 title">
                <h1>Tables</h1>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>State Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="info">Info</Button>
                            <Button className="success">Success</Button>
                            <Button className="primary">Primary</Button>
                            <Button className="light">Light</Button>
                            <Button className="dark">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Circle Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-circle">Danger</Button>
                            <Button className="warning btn-circle">Warning</Button>
                            <Button className="info btn-circle">Info</Button>
                            <Button className="success btn-circle">Success</Button>
                            <Button className="primary btn-circle">Primary</Button>
                            <Button className="light btn-circle">Light</Button>
                            <Button className="dark btn-circle">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Shadow Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow">Danger</Button>
                            <Button className="warning btn-shadow">Warning</Button>
                            <Button className="info btn-shadow">Info</Button>
                            <Button className="success btn-shadow">Success</Button>
                            <Button className="primary btn-shadow">Primary</Button>
                            <Button className="light btn-shadow">Light</Button>
                            <Button className="dark btn-shadow">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Button with Icon</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow"><FiX /> Danger</Button>
                            <Button className="warning btn-shadow"><FiAlertTriangle /> Warning</Button>
                            <Button className="info btn-shadow"><FiInfo />Info</Button>
                            <Button className="success btn-shadow"><FiCheckCircle /> Success</Button>
                            <Button className="primary btn-shadow"><FiCoffee /> Primary</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Size Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons>
                            <Button className="danger btn-sm">Danger SM</Button>
                            <Button className="warning btn-sm">Warning SM</Button>
                            <Button className="success btn-sm">Success SM</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="success">Success</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger btn-lg">Danger LG</Button>
                            <Button className="warning btn-lg">Warning LG</Button>
                            <Button className="success btn-lg">Success LG</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
        </>
    );
}
Example #5
Source File: modalForm.js    From dashboard-reactjs with MIT License 4 votes vote down vote up 
function ModalExperience({ isOpen, toggleModal, submit }) {
    const [ error, setError ] = useState(false);
    const reference = useRef(null);

    const [ data, setData ] = useState({
        office: '',
        org: '',
        location: '',
        description: '',
    });

    function handleInputChange(e) {
        const { value, name } = e.target;

        setData({
            ...data,
            [name]: value
        });
    }

    function handleSubmit(e) {
        e.preventDefault();
        // alert(JSON.stringify(data))

        submit()
    }

    return (

        <StyledModal
            isOpen={isOpen}
            onBackgroundClick={toggleModal}
            onEscapeKeydown={toggleModal}
        >
            <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLabel">Modal Form</h5>
                <button type="button" className="close" onClick={toggleModal}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <Form onSubmit={handleSubmit}>
                <div className="modal-body" ref={reference}>
                    {error === 1 && <Alert className="danger" text="Por favor, preencha todos os campos obrigatórios" />}
                    {error === 2 && <Alert className="danger" text="Por favor, preencha todos os campos obrigatórios" />}
                    {error === 3 && <Alert className="danger" text="Por favor, selecione uma data válida" />}
                    <div className="input-block">
                        <label className="required">Office <sup>*</sup></label>
                        <input
                            name="office"
                            type="text"
                            placeholder="Ex: Gerente de vendas..."
                            // value={}
                            onChange={handleInputChange}
                        />
                    </div>
                    <div className="input-block">
                        <label className="required">Business <sup>*</sup></label>
                        <input
                            name="org"
                            type="text"
                            placeholder="Ex: Microsoft..."
                            onChange={handleInputChange}
                        />
                    </div>

                    <div className="input-block">
                        <label>Location</label>
                        <input
                            name="location"
                            type="text"
                            placeholder="Ex: Rio de Janeiro..."
                            onChange={handleInputChange}
                        />
                    </div>
                    <div className="input-block">
                        <label>Description</label>
                        <textarea
                            name="description"
                            rows="5"
                            onChange={handleInputChange}
                        ></textarea>
                    </div>


                </div>
                <div className="modal-footer">
                    <button type="button" className="close" onClick={toggleModal}>
                        <FiX /> Close
                    </button>
                    <button type="submit" className="submit">
                        <FiCheckCircle /> Submit
                    </button>
                </div>
            </Form>
        </StyledModal>
    );

}
Example #6
Source File: index.js    From plataforma-sabia with MIT License 4 votes vote down vote up 
Register = ({ initialStepIndex }) => {
	const [activeStep, setActiveStep] = useState({
		...steps[initialStepIndex ?? 0],
		index: initialStepIndex ?? 0,
	});
	const [userData, setUserData] = useState({});
	const CurrentStepComponent = activeStep.component;
	const isLastStep = activeStep.index === steps.length - 1;
	const canGoToPreviousStep = activeStep.index === 1;

	const updateUserData = (data) => setUserData((prev) => ({ ...prev, ...data }));

	const setNextStep = () => {
		setActiveStep((active) => ({ ...steps[active.index + 1], index: active.index + 1 }));
	};

	const setPrevStep = () => {
		setActiveStep((active) => ({ ...steps[active.index - 1], index: active.index - 1 }));
	};

	return (
		<S.Container backgroundImage={activeStep.backgroundImage}>
			{!isLastStep && (
				<S.Sidebar>
					{canGoToPreviousStep && (
						<RectangularButton colorVariant="silver" onClick={setPrevStep}>
							<FiArrowLeft fontSize="2rem" strokeWidth={2.5} />
						</RectangularButton>
					)}

					<Link href={internalPages.home} passHref>
						<S.LogoWrapper>
							<Image
								src="/logo-mono.svg"
								alt="Plataforma Sabiá"
								width={215}
								height={65}
								layout="responsive"
							/>
						</S.LogoWrapper>
					</Link>

					<S.StepsWrapper>
						<S.StepsTitle>Cadastro de Usuários</S.StepsTitle>

						<S.Steps>
							{steps.map((step, index) => {
								const isLast = index === steps.length - 1;
								if (isLast) return null;

								const isActive = step.title === activeStep.title;
								const isCompleted = activeStep.index > index;

								return (
									<S.Step
										key={step.title}
										active={isActive}
										completed={isCompleted}
									>
										{!!isActive && <FiArrowRight />}
										{!!isCompleted && <FiCheckCircle />}

										<p>{step.title}</p>
									</S.Step>
								);
							})}
						</S.Steps>
					</S.StepsWrapper>
				</S.Sidebar>
			)}

			<S.Content>
				{!isLastStep && (
					<>
						<S.PageTitle>Cadastro de Usuários</S.PageTitle>
						<S.ProgressIndicator
							stepsLength={steps.length}
							activeStepIndex={activeStep.index}
						/>
					</>
				)}

				{CurrentStepComponent && (
					<CurrentStepComponent
						activeStep={activeStep}
						setNextStep={setNextStep}
						setPrevStep={setPrevStep}
						userData={userData}
						updateUserData={updateUserData}
					/>
				)}
			</S.Content>
		</S.Container>
	);
}