react-icons/fa#FaCheckCircle JavaScript Examples
The following examples show how to use
react-icons/fa#FaCheckCircle.
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: Toolbar.js From dm2 with Apache License 2.0 | 5 votes |
|
SubmissionButtons = observer(
({ lsf, annotation, isLabelStream, disabled }) => {
const { userGenerate, sentUserGenerate } = annotation;
const isNewTask = userGenerate && !sentUserGenerate;
const saveAnnotation = React.useCallback(() => {
if (!disabled) {
isNewTask ? lsf.submitAnnotation() : lsf.updateAnnotation();
}
}, [disabled, isNewTask, lsf]);
const skipTask = React.useCallback(() => {
if (!disabled) {
lsf.skipTask();
}
}, [disabled, lsf]);
const buttons = [];
const submitShortcut = useShortcut('lsf.save-annotation', saveAnnotation, { showShortcut: true }, [disabled]);
const rejectShortcut = useShortcut('lsf.reject-task', skipTask, { showShortcut: true }, [disabled]);
buttons.push(
<Tooltip
key="skip"
title={rejectShortcut}
mouseEnterDelay={TOOLTIP_DELAY}
>
<Button
look="danger"
onClick={skipTask}
disabled={disabled}
icon={<Icon icon={FaBan} />}
>
Skip
</Button>
</Tooltip>,
);
buttons.push(
<Tooltip
key="submit"
title={submitShortcut}
mouseEnterDelay={TOOLTIP_DELAY}
>
<Button
look="primary"
disabled={disabled}
icon={<Icon icon={isNewTask ? FaCheck : FaCheckCircle} />}
onClick={saveAnnotation}
>
{isNewTask || isLabelStream ? "Submit" : "Update"}
</Button>
</Tooltip>,
);
return <Space>{buttons}</Space>;
},
)
Example #2
| Source File: about.js From tomoblo with MIT License | 4 votes |
|
AboutPage = props => {
const labels = props.data.site.siteMetadata.labels;
const aboutTags = ["react", "nodejs", "html", "css"];
const tags = {};
labels.forEach(label => {
aboutTags.forEach(tag => {
if (tag === label.tag) {
tags[tag] = label.name;
}
});
});
return (
<Layout>
<SEO title="About" />
<div className="post-page-main">
<div className="sidebar px-4 py-2">
<Sidebar />
</div>
<div className="post-main">
<SEO title="About" />
<div className="mt-3">
<h2 className="title">About</h2>
<p>
<i>
Developer Diary is a Gatsby Starter blog template created with
web developers in mind, but really, anyone can use it. It's
totally usable right out of the box, but minimalist enough to be
easily modifiable to suit your needs.
</i>
</p>
<br />
<h4>Features</h4>
<div>
<span className="text-success d-inline-block" title="blazing">
<FaCheckCircle size={26} style={{ color: "success" }} />
</span>
<p className="d-inline-block ml-3 w-75 align-top">
Blazing fast, as you'd expect from a Gatsby site
</p>
</div>
<div>
<span className="text-success d-inline-block" title="tags">
<FaCheckCircle size={26} style={{ color: "success" }} />
</span>
<p className="d-inline-block ml-3 w-75 align-top">
Tech tags designed for web developers
</p>
<div className="ml-5">
<TechTag
tag="react"
tech="React"
name={tags["react"]}
size={20}
color="deepskyblue"
/>
<TechTag
tag="nodejs"
tech="Node.js"
name={tags["nodejs"]}
size={20}
color="lightgreen"
/>
<TechTag
tag="html"
tech="HTML"
name={tags["html"]}
size={20}
color="darkorange"
/>
<TechTag
tag="css"
tech="CSS"
name={tags["css"]}
size={20}
color="teal"
/>
</div>
</div>
<div className="mt-4">
<span className="text-success d-inline-block" title="prism">
<FaCheckCircle size={26} style={{ color: "success" }} />
</span>
<p className="d-inline-block ml-3 w-75 align-top">
Includes Prism for code block styling in markdown files
</p>
</div>
<div>
<span className="text-success d-inline-block" title="icons">
<FaCheckCircle size={26} style={{ color: "success" }} />
</span>
<p className="d-inline-block ml-3 w-75 align-top">
Developer-relevant social-media icon links including GitHub,
Stack Overflow and freeCodeCamp
</p>
</div>
<div>
<span className="text-success d-inline-block" title="mobile">
<FaCheckCircle size={26} style={{ color: "success" }} />
</span>
<p className="d-inline-block ml-3 w-75 align-top">
Mobile responsive, of course
</p>
</div>
</div>
</div>
</div>
</Layout>
);
}
Example #3
| Source File: tool.js From website with MIT License | 4 votes |
|
export default function Tool(d) {
const tool = d.data.toolsYaml
const introText = getIntroText(tool)
const metaDescription = getMetaDescription(tool)
const similarTools = getSimilarTools(tool, d.data.allToolsYaml.nodes, 5)
const freeTools = getFreeTools(tool, d.data.allToolsYaml.nodes, 5)
return (
<Layout>
<Helmet>
<meta charSet="utf-8" />
<meta name="description" content={metaDescription} />
<title>
{tool.name} - {introText}
</title>
</Helmet>
<article tw="shadow w-full">
<div tw="bg-white flex justify-start p-2 md:p-6 w-full">
<div tw="md:w-12 flex-none">
<Vote k={tool.children[0].key} sum={tool.children[0].sum} />
</div>
<div tw="pl-2">
<a tw="hover:underline" href={tool.homepage}>
<h1 tw="text-3xl font-semibold mb-5">{tool.name}</h1>
</a>
<p tw="pb-3">{tool.description}</p>
</div>
</div>
<div tw="px-4 md:pl-20 md:pr-6">
{tool.fields.githubStats.stargazers_count && (
<div tw="flex">
<a tw="hover:underline" href={tool.source}>
Github:
</a>
<ul tw="ml-2 mb-2">
<span tw="mr-3" href={tool.source}>
<FaStar tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.stargazers_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaEye tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.watchers_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaExclamationCircle tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.open_issues_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaCodeBranch tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.forks_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaCalendarAlt tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.created_at}
</span>
</ul>
</div>
)}
<div tw="flex mb-8">
<span>Workflow integration:</span>
<ul tw="flex">
{tool.types.map(t => (
<li tw="flex" key={t}>
<img
tw="self-start object-contain ml-2 w-6"
src={`/icons/${t}.svg`}
alt={`Type: ${t}`}
/>
<div tw="flex-1">{t}</div>
</li>
))}
</ul>
</div>
<MainMedia tool={tool} />
<p tw="mb-3">
<FaHome tw="mb-1 mr-2 inline-block" />
<a tw="underline" href={tool.homepage}>
Official {tool.name} Homepage
</a>
</p>
{tool.source && (
<p tw="mb-3">
<FaLink tw="mb-1 mr-2 inline-block" />
<a tw="underline" href={tool.source}>
{tool.source}
</a>
</p>
)}
{tool.license ? (
<p tw="mb-3">
<FaCopyright tw="mb-1 mr-2 inline-block" /> {tool.license}{" "}
</p>
) : (
<p tw="mb-3">
<FaOsi tw="mb-1 mr-2 inline-block" />{" "}
{tool.fields.githubStats.license
? tool.fields.githubStats.license.name
: "Open Source"}
</p>
)}
{tool.deprecated ? (
<p tw="mb-3">
<FaExclamationCircle tw="text-red-500 mb-1 mr-2 inline-block" />{" "}
<span tw="text-red-800">Deprecated/Unmaintained </span>
</p>
) : (
<p tw="mb-3">
<FaCheckCircle tw="mb-1 mr-2 inline-block" /> Maintained
</p>
)}
<div>
<FaTags tw="mb-1 mr-2 inline-block align-top" />
<ul tw="list-none max-w-sm inline-block align-top">
{tool.tags.map(tag => (
<li tw="mb-2 mr-1 inline-block" key={tag}>
<a href={"/tag/" + tag}>
<span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
{tag}
</span>
</a>
</li>
))}
</ul>
</div>
{tool.resources && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 font-bold">More Resources</h3>
<ul tw="list-disc">
{tool.resources.map(resource => (
<li tw="underline ml-4 py-1" key={resource.title}>
<a href={resource.url}>{resource.title}</a>
</li>
))}
</ul>
</div>
)}
{freeTools.length > 0 && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 text-3xl font-semibold">
Free/OSS Alterantives
</h3>
<ul tw="list-disc">
{freeTools.map(tool => (
<li key={`${tool.slug}-free`} tw="list-none">
<span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
{tool.votes}
</span>
<Link to={tool.slug}>{tool.name}</Link>
</li>
))}
</ul>
</div>
)}
{similarTools.length > 0 && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 text-xl font-semibold">Alternative Tools</h3>
<ul tw="list-disc">
{similarTools.map(tool => (
<li key={`${tool.slug}-similar`} tw="list-none">
<span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
{tool.votes}
</span>
<Link to={tool.slug}>{tool.name}</Link>
</li>
))}
</ul>
</div>
)}
<div>
<Utterances
repo="analysis-tools-dev/website-comments"
issueTerm="pathname"
label=""
theme="github-light"
crossorigin="anonymous"
async={false}
style={`
& .utterances {
max-width: 950px;
}
`}
/>
</div>
</div>
</article>
</Layout>
)
}
