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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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&nbsp;
            <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>
  )
}