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 |
|
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 |
|
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">×</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 |
|
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 |
|
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 |
|
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">×</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 |
|
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>
);
}
