react-icons/fa#FaCheck JavaScript Examples

The following examples show how to use react-icons/fa#FaCheck. 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: Todos.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
Todos = ({ todos, markComplete }) => {
    return (
        <ListGroup className='mt-5 mb-2'>
            {todos.map((todo) => (
                <ListGroupItem key={todo.id}>
                    {todo.title}
                    <span onClick={() => markComplete(todo.id)} className='float-end'>
                        <FaCheck />
                    </span>
                </ListGroupItem>
            ))}
        </ListGroup>
    )
}
Example #2
Source File: Todos.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
Todos = () => {
    const { todos, dispatch } = useContext(TodoContext);

    return (
        <ListGroup className="mt-5 mb-2 items">
            {todos.map(todo => (
                <ListGroupItem key={todo.id}>
                    {todo.todoString}
                    <span
                        className="float-end"
                        onClick={() => {
                            dispatch({
                                type: REMOVE_TODO,
                                payload: todo.id
                            });
                        }}
                    >
                        <FaCheck />
                    </span>
                </ListGroupItem>
            ))}
        </ListGroup>
    );
}
Example #3
Source File: Todo.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
Todo = ({ todos, completedFlag }) => {
    return (
        <ListGroup className='m-5 mb-2 items'>
            {
                todos.map((todo => (
                    <ListGroupItem key={todo.id}>
                        {todo.todoVal}
                        <span className='float-end' onClick={() => completedFlag(todo.id)} ><FaCheck /></span>
                    </ListGroupItem>
                )))
            }
        </ListGroup>
    )
}
Example #4
Source File: index.js    From gatsby-shopify-course with BSD Zero Clause License 6 votes vote down vote up 
export function Checkbox({ checked }) {
  return (
    <CheckboxWrapper checked={checked}>
      <div>
        <FaCheck color="white" />
      </div>
    </CheckboxWrapper>
  );
}
Example #5
Source File: Toolbar.js    From dm2 with Apache License 2.0 5 votes vote down vote up 
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 #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: Pricing.js    From make-react-apps-site with MIT License 4 votes vote down vote up 
export default function Pricing({ whichCourse = 'a' }) {
  const [showDialog, setShowDialog] = useState(false)

  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  const { url } = wordsAreHard[whichCourse]

  const color = whichCourse === 'a' ? 'blue' : 'purple'
  const iconColors =
    whichCourse === 'a'
      ? {
          '--fa-primary-color': '#4b5ed4',
          '--fa-secondary-color': '#19b9ca',
        }
      : {
          '--fa-primary-color': '#91cef4',
          '--fa-secondary-color': '#ff9676',
        }

  return (
    <SPricing
      id="pricing"
      className="bg-green-600 text-gray-300 py-32 px-6 lg:px-24 lg:pb-40"
    >
      {showDialog && (
        <UpsellDialog isShowing={showDialog} close={close} url={url} />
      )}

      <div className="container mx-auto">
        {/* pricing box ==================================================== */}
        <div className="bg-white rounded-lg shadow-lg w-full md:w-4/5 xl:w-3/5 text-gray-900 mx-auto">
          {/* header */}
          <h3
            className={`fugaz-one w-full pt-6 pb-4 lg:pt-8 lg:pb-6 px-12 text-xl lg:text-4xl font-bold uppercase rounded-t-lg ${
              color === 'blue'
                ? 'bg-blue-200 text-blue-500'
                : 'bg-purple-200 text-purple-500'
            }`}
          >
            Start{' '}
            <strong
              className={`${
                color === 'blue' ? 'text-blue-700' : 'text-purple-700'
              }`}
            >
              Creating React Apps
            </strong>
          </h3>

          <div className="py-10 px-12">
            {/* price info */}
            <div
              className={`flex items-center leading-none text-6xl ${
                color === 'blue' ? 'text-blue-800' : 'text-purple-800'
              }`}
            >
              <div>
                <span className="mr-1 opacity-50">$</span>
                <span>47</span>
              </div>
            </div>
            <p className="mt-6 text-lg text-gray-600">
              All the React training to level up your skills.
            </p>
          </div>

          <div className="bg-gray-100 text-gray-700 py-10 px-12">
            {/* main info */}
            <p className="leading-loose mb-8 font-normal">
              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                Get access to {whichCourse === 'a' ? '49 videos' : '32 videos'}
              </div>

              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                6+ hours of learning
              </div>

              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                Source code for the apps
              </div>

              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                Access to exclusive Discord community for support
              </div>

              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                Use the code for your own projects
              </div>

              <div className="flex items-center">
                <FaCheck className="mr-3" style={iconColors} />
                Unlimited updates
              </div>
            </p>

            <SCheckoutButton
              onClick={open}
              className="overflow-hidden flex items-center justify-between lg:text-2xl bg-yellow-400 text-yellow-700 shadow hover:shadow-lg rounded px-6 py-5 cursor-pointer w-full transition-all ease-in duration-150"
            >
              <span>
                Buy 10 React Apps{' '}
                {whichCourse === 'b' && (
                  <strong className="text-yellow-800 capitalize">
                    (Part 2)
                  </strong>
                )}
              </span>
              <FaCheck className="opacity-75" />
            </SCheckoutButton>
          </div>
        </div>
      </div>
    </SPricing>
  )
}