react-icons/fi#FiEdit3 TypeScript Examples

The following examples show how to use react-icons/fi#FiEdit3. 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: index.tsx    From rocketseat-gostack-11-desafios with MIT License 5 votes vote down vote up 
Food: React.FC<IProps> = ({
  food,
  handleDelete,
  handleEditFood,
  toggleModal,
}: IProps) => {
  const [isAvailable, setIsAvailable] = useState(food.available);

  async function toggleAvailable(): Promise<void> {
    await api.put(`/foods/${food.id}`, { ...food, available: !isAvailable });

    setIsAvailable(state => !state);
  }

  function setEditingFood(): void {
    handleEditFood(food);
    toggleModal();
  }

  return (
    <Container available={isAvailable}>
      <header>
        <img src={food.image} alt={food.name} />
      </header>
      <section className="body">
        <h2>{food.name}</h2>
        <p>{food.description}</p>
        <p className="price">
          R$ <b>{food.price}</b>
        </p>
      </section>
      <section className="footer">
        <div className="icon-container">
          <button
            type="button"
            className="icon"
            onClick={() => setEditingFood()}
            data-testid={`edit-food-${food.id}`}
          >
            <FiEdit3 size={20} />
          </button>

          <button
            type="button"
            className="icon"
            onClick={() => handleDelete(food.id)}
            data-testid={`remove-food-${food.id}`}
          >
            <FiTrash size={20} />
          </button>
        </div>

        <div className="availability-container">
          <p>{isAvailable ? 'Disponível' : 'Indisponível'}</p>

          <label htmlFor={`available-switch-${food.id}`} className="switch">
            <input
              id={`available-switch-${food.id}`}
              type="checkbox"
              checked={isAvailable}
              onChange={toggleAvailable}
              data-testid={`change-status-food-${food.id}`}
            />
            <span className="slider" />
          </label>
        </div>
      </section>
    </Container>
  );
}
Example #2
Source File: index.tsx    From ecoleta with MIT License 5 votes vote down vote up 
Point: React.FC<IProps> = ({ point, handleDelete }: IProps) => {
  return (
    <Container>
      <header>
        {point.image ? (
          <img src={point.image_url} alt={point.name} />
        ) : (
          <img src={noImage} alt={point.name} />
        )}
      </header>
      <section className="body">
        <h2>{point.name}</h2>
        <Contato>
          <h3>Contato</h3>
          <p>{point.email}</p>
          <div>
            <span>
              {point.city}, {point.uf}
            </span>
          </div>
        </Contato>
        <p className="items">
          <strong>
            {point.point_items.map(pi => pi.item.title).join(', ')}
          </strong>
        </p>
      </section>
      <section className="footer">
        <div className="icon-container">
          <Link to={`update-point/${point.id}`} className="icon">
            <FiEdit3 size={20} />
          </Link>

          <button
            type="button"
            className="icon"
            onClick={() => {
              handleDelete(point.id);
            }}
          >
            <FiTrash size={20} />
          </button>
        </div>
      </section>
    </Container>
  );
}