react-icons/fa#FaCaretDown JavaScript Examples
The following examples show how to use
react-icons/fa#FaCaretDown.
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: vote.js From website with MIT License | 6 votes |
|
export default function Vote({ k, sum }) {
const [votes, setVotes] = useState(sum)
const [hasVoted, setHasVoted] = useState(false)
const vote = async direction => {
try {
if (hasVoted) {
return false
}
if (direction === "Up") {
setVotes(votes + 1)
} else {
setVotes(votes - 1)
}
setHasVoted(true)
await fetch(`/api/vote${direction}?tag=${k}`)
} catch (e) {
//voting didn't work out
}
}
return (
<div tw="text-center text-gray-600">
<VoteLink hasVoted={hasVoted} onClick={() => vote("Up")}>
<FaCaretUp tw="m-auto" />
</VoteLink>
<span tw="block text-color4 font-bold">{votes}</span>
<VoteLink hasVoted={hasVoted} onClick={() => vote("Down")}>
<FaCaretDown tw="m-auto" />
</VoteLink>
</div>
)
}
Example #2
| Source File: ToggleButton.js From devagram with GNU General Public License v3.0 | 6 votes |
|
ToggleButton = ({ onChange, selectedValue }) => {
return (
<div className={classes.ToggleButton}>
<FaCaretDown className={classes.caret} />
<select value={selectedValue} onChange={onChange}>
<option value="all">All</option>
<option value="job">jobs</option>
<option value="hackathon">Hackathons</option>
</select>
</div>
);
}
Example #3
| Source File: Label.js From dm2 with Apache License 2.0 | 6 votes |
|
LabelingHeader = ({ SDK, onClick, isExplorerMode }) => {
return (
<Elem name="header" mod={{ labelStream: !isExplorerMode }}>
<Space size="large">
{SDK.interfaceEnabled("backButton") && (
<Button
icon={<FaChevronLeft style={{ marginRight: 4, fontSize: 16 }} />}
type="link"
onClick={onClick}
style={{ fontSize: 18, padding: 0, color: "black" }}
>
Back
</Button>
)}
{isExplorerMode ? (
<FieldsButton
wrapper={FieldsButton.Checkbox}
icon={<Icon icon={FaColumns} />}
trailingIcon={<Icon icon={FaCaretDown} />}
title={"Fields"}
/>
) : null}
</Space>
</Elem>
);
}
Example #4
| Source File: instruments.js From dm2 with Apache License 2.0 | 5 votes |
|
instruments = {
'view-toggle': ({ size }) => {
return <ViewToggle size={size} style={style} />;
},
'columns': ({ size }) => {
return (
<FieldsButton
wrapper={FieldsButton.Checkbox}
trailingIcon={<Icon icon={FaCaretDown} />}
title={"Columns"}
size={size}
style={style}
/>
);
},
'filters': ({ size }) => {
return <FiltersPane size={size} style={style} />;
},
'ordering': ({ size }) => {
return <OrderButton size={size} style={style} />;
},
'grid-size': ({ size }) => {
return <GridWidthButton size={size}/>;
},
'refresh': ({ size }) => {
return <RefreshButton size={size}/>;
},
'loading-possum': () => {
return <LoadingPossum/>;
},
'label-button': ({ size }) => {
return <LabelButton size={size}/>;
},
'actions': ({ size }) => {
return <ActionsButton size={size} style={style} />;
},
'error-box': () => {
return <ErrorBox/>;
},
'import-button': ({ size }) => {
return (
<Interface name="import">
<ImportButton size={size}>Import</ImportButton>
</Interface>
);
},
'export-button': ({ size }) => {
return (
<Interface name="export">
<ExportButton size={size}>Export</ExportButton>
</Interface>
);
},
}
Example #5
| Source File: FilterDropdown.js From dm2 with Apache License 2.0 | 5 votes |
|
FilterDropdown = observer(({
placeholder,
defaultValue,
items,
style,
disabled,
onChange,
multiple,
value,
optionRender,
dropdownClassName,
outputFormat,
}) => {
return (
<Select
multiple={multiple}
placeholder={placeholder}
defaultValue={defaultValue}
value={value}
tagRender={TagRender(items)}
bordered={false}
style={{
fontSize: 12,
width: "100%",
backgroundColor: disabled ? "none" : "#fafafa",
...(multiple ? { padding: 0 } : {}),
...(style ?? {}),
}}
dropdownStyle={{ minWidth: "fit-content" }}
onChange={(value) => onChange(outputFormat?.(value) ?? value)}
disabled={disabled}
size="small"
suffixIcon={<Icon icon={FaCaretDown} />}
listItemHeight={20}
listHeight={600}
dropdownClassName={dropdownClassName}
>
{items.map(renderOptions(optionRender))}
</Select>
);
})
Example #6
| Source File: ReviewsHeader.jsx From Etsy-Reviews with MIT License | 5 votes |
|
ReviewsHeader = (props) => {
const {
reviewsForItem, reviewsForShop, reviewsTab, handleClick, handleSortClick,
handleDropdown, dropdown, handleSortNewest, handleSortRecommended, sortName,
} = props;
if (sortName === 'Newest') {
return (
<ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
<div>
<h3 className="reviews-total">
{reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
</h3>
<div className="reviews-tab-items">
<div className="reviews-tab-list" id="reviews-tab-list">
<button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
<button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
</div>
</div>
</div>
<div className="reviews-sort">
<div className="reviews-sort-items">
<button type="button" className="reviews-sort-title" onClick={handleDropdown}>
Sort by: {sortName} <FaCaretDown />
</button>
<div className="reviews-dropdown-content">
<div className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended</div>
<br></br>
<div className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest <span id="reviews-dropdown-check"><FaCheck/></span></div>
</div>
</div>
</div>
</ReviewsHeaderContainer>
);
}
return (
<ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
<div>
<h3 className="reviews-total">
{reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
</h3>
<div className="reviews-tab-items">
<div className="reviews-tab-list" id="reviews-tab-list">
<button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
<button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
</div>
</div>
</div>
<div className="reviews-sort">
<div className="reviews-sort-items">
<button type="button" className="reviews-sort-title" onClick={handleDropdown}>
Sort by: {sortName} <FaCaretDown />
</button>
<div className="reviews-dropdown-content">
<a className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended <span id="reviews-dropdown-check"><FaCheck/></span></a>
<br></br>
<a className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest</a>
</div>
</div>
</div>
</ReviewsHeaderContainer>
);
}
Example #7
| Source File: aside.js From website with MIT License | 4 votes |
|
Aside = () => {
return (
<aside tw="w-full md:w-1/3 flex flex-col items-center px-3">
<div tw="w-full bg-white shadow flex flex-col p-6">
<p tw="text-xl font-semibold pb-5">Write Better Software</p>
<p tw="text-justify text-gray-600">
On this page you can find static code analysis tools and linters that
can help you improve code quality. All tools are peer-reviewed by
fellow developers to meet high standards.
</p>
<img
width="269px"
height="204px"
src="/hero/hero.svg"
alt="People analysing charts"
/>
<Link
to="/blog/static-analysis-is-broken-lets-fix-it"
tw="w-full bg-blue-800 text-white font-bold text-sm uppercase rounded hover:bg-blue-700 duration-300 transition-all flex items-center justify-center px-2 py-3 mt-4"
>
Our mission
</Link>
</div>
<div tw="w-full bg-white shadow flex flex-col my-4 p-6">
<p tw="text-xl font-semibold pb-5">Our Sponsors</p>
<p tw="pb-10 text-justify text-gray-600">
This website is completely{" "}
<a
tw="underline"
href="https://github.com/analysis-tools-dev/website/"
>
open source
</a>
. To fund our work, we fully rely on sponsors. Thanks to them, we can
keep the site free for everybody. Please check out their offers below.
</p>
<p tw="pb-6">
<a href="https://www.deepcode.ai?utm_source=github_analysis_tools.dev&utm_medium=sponsorship&utm_content=banner_logo">
<img
style={{ maxHeight: "65px", margin: "0 auto" }}
width="269px"
height="50px"
alt="DeepCode logo"
src="/sponsors/deepcode.png"
/>
</a>
</p>
<p tw="pb-6">
<a href="https://codescene.io?utm_source=github_analysis_tools.dev&utm_medium=sponsorship&utm_content=banner_logo">
<img
style={{ maxHeight: "65px", margin: "0 auto" }}
width="269px"
height="50px"
alt="CodeScene logo"
src="/sponsors/codescene.svg"
/>
</a>
</p>
<p tw="pb-10">
<a href="https://r2c.dev?utm_source=github_analysis_tools.dev&utm_medium=sponsorship&utm_content=banner_logo">
<img
style={{ maxHeight: "65px", margin: "0 auto" }}
alt="r2c logo"
src="/sponsors/r2c.svg"
/>
</a>
</p>
<p tw="pb-6">
<a href="https://codiga.io">
<img
style={{ maxHeight: "65px", margin: "0 auto" }}
alt="codiga logo"
src="/sponsors/codiga.svg"
/>
</a>
</p>
<p tw="pb-6">
<a href="https://offensive360.com">
<img
style={{ maxHeight: "90px", margin: "0 auto" }}
alt="offensive360 logo"
src="/sponsors/offensive360.png"
/>
</a>
</p>
</div>
<div tw="w-full bg-white shadow flex flex-col my-4 p-6">
<p tw="text-xl font-semibold pb-5">You Can Contribute!</p>
<p tw="text-gray-600">
You can help to improve this list by voting{" "}
<FaCaretUp tw="inline-block text-gray-600" />/
<FaCaretDown tw="inline-block text-gray-600" /> for your favorite
tools or adding new ones{" "}
<a
tw="underline"
href="https://github.com/analysis-tools-dev/static-analysis/blob/master/CONTRIBUTING.md"
>
on Github
<img
src="/logos/github.svg"
alt="GitHub mark logo"
tw="w-4 h-4 inline-block"
/>
</a>
</p>
</div>
<div tw="w-full bg-white shadow flex flex-col my-4 p-6">
<p tw="text-xl font-semibold pb-5">Popular Tools By Language</p>
<div tw="grid grid-cols-3 gap-3">
<a href="/tag/python">
<img
width="64"
height="64"
tw="hover:opacity-75"
alt="Python"
src="/logos/python.svg"
/>
</a>
<a href="/tag/ruby">
<img tw="hover:opacity-75" alt="Ruby" src="/logos/ruby.svg" />
</a>
<a href="/tag/php">
<img tw="hover:opacity-75" alt="PHP" src="/logos/php.svg" />
</a>
<a href="/tag/c">
<img tw="hover:opacity-75" alt="C" src="/logos/c.svg" />
</a>
<a href="/tag/javascript">
<img
tw="hover:opacity-75"
alt="JavaScript"
src="/logos/javascript.svg"
/>
</a>
<a href="/tag/go">
<img tw="hover:opacity-75" alt="Go" src="/logos/go.svg" />
</a>
</div>
</div>
</aside>
)
}
