react-icons/fa#FaTags JavaScript Examples
The following examples show how to use
react-icons/fa#FaTags.
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: post.js From gatsby-starter-breeze with MIT License | 6 votes |
|
Post = ({ post }) => {
return (
<article>
<header className={styles["header"]}>
{post.frontmatter.image && (
<div
className={styles["header__image"]}
style={{ backgroundImage: `url(${post.frontmatter.image})` }}
></div>
)}
<div className={styles["header__info"]}>
<h1 className={styles["header__info__title"]}>
{post.frontmatter.title}
</h1>
<span className={styles["header__info__date"]}>
<FaRegCalendarAlt className={styles["icon"]} />
{post.fields.date}
</span>
{post.frontmatter.tags && (
<span className={styles["header__info__tags"]}>
<FaTags className={styles["icon"]} />
<ol>
{post.frontmatter.tags.map(tag => (
<li key={tag}>
<Link to={`/tags/${_.kebabCase(tag)}/`}>{tag}</Link>
</li>
))}
</ol>
</span>
)}
</div>
</header>
<section
className={styles["content"]}
dangerouslySetInnerHTML={{ __html: post.html }}
/>
</article>
)
}
Example #2
| 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>
)
}
