react-icons/ai#AiOutlineArrowRight JavaScript Examples

The following examples show how to use react-icons/ai#AiOutlineArrowRight. 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.js    From plataforma-sabia with MIT License 4 votes vote down vote up 
BuyTechnologyModal = ({ technology }) => {
	const [fields, setFields] = useReducer(useStateReducer, initialState);
	const [isSubmitting, setIsSubmitting] = useState(false);
	const { closeModal } = useModal();
	const validForm = validateFields(fields);

	const handleSumTechQuantity = (quantityToSum) =>
		setFields((prevState) => ({ quantity: prevState.quantity + quantityToSum }));

	const handleSubmit = async (e) => {
		e.preventDefault();
		setIsSubmitting(true);

		const result = await buyTechnology(technology.id, { ...fields });

		if (result) toast.success('Ordem de compra enviada com sucesso');
		else
			toast.error(
				'Ocorreu um erro ao registrar ordem de compra. Tente novamente em instantes.',
			);

		setIsSubmitting(false);
		closeModal();
	};

	return (
		<form onSubmit={handleSubmit}>
			<S.Header>
				<div>
					<img
						src={technology.thumbnail?.url || '/card-image.jpg'}
						alt="Imagem de capa para a tecnologia"
					/>
				</div>

				<div>
					<h3>{technology.title}</h3>

					<S.QuantityField>
						<span id="btm1befa-technology-quantity">
							Quantas unidades da tecnologia?
							<RequiredIndicator />
						</span>

						<div aria-labelledby="btm1befa-technology-quantity">
							<button
								aria-label="Decrease quantity"
								onClick={() => handleSumTechQuantity(-1)}
								type="button"
								disabled={!fields.quantity}
							>
								<AiOutlineArrowLeft />
							</button>

							<span role="textbox" aria-readonly="true">
								{fields.quantity}
							</span>

							<button
								aria-label="Increase quantity"
								onClick={() => handleSumTechQuantity(1)}
								type="button"
							>
								<AiOutlineArrowRight />
							</button>
						</div>
					</S.QuantityField>

					<S.TechnologyUseField>
						<span id="btm6c297-technology-use">
							A tecnologia será adquirida para uso:
							<RequiredIndicator />
						</span>
						<div aria-labelledby="btm6c297-technology-use">
							{Object.values(orderUseEnum).map((option) => {
								const label = getUseLabelText(option);

								return (
									<S.RadioWrapper key={option}>
										<input
											id={`btm2b3ef-${label}`}
											value={option}
											name="technology-use"
											type="radio"
											onChange={(e) => setFields({ use: e.target.value })}
										/>
										<label htmlFor={`btm2b3ef-${label}`}>{label}</label>
									</S.RadioWrapper>
								);
							})}
						</div>
					</S.TechnologyUseField>
				</div>
			</S.Header>

			<S.Content>
				<span id="btm1sfb4-funding">
					Deseja financiamento para essa aquisição?
					<RequiredIndicator />
				</span>
				<Select
					aria-labelledby="btm1sfb4-funding"
					instanceId="btm1s23e-funding-select"
					options={technologyFunding}
					placeholder="Selecione a opção"
					isSearchable={false}
					onChange={(option) => setFields({ funding: option.value })}
				/>

				<label htmlFor="btm21sf1-comments">
					Observações
					<input
						id="btm21sf1-comments"
						type="text"
						onChange={(e) => setFields({ comment: e.target.value })}
					/>
				</label>
			</S.Content>

			<S.Actions>
				<RectangularButton variant="outlined" colorVariant="red" onClick={closeModal}>
					Cancelar
				</RectangularButton>
				<RectangularButton
					variant="filled"
					colorVariant="green"
					disabled={!validForm || isSubmitting}
					type="submit"
				>
					Adquirir tecnologia
				</RectangularButton>
			</S.Actions>
		</form>
	);
}