react-icons/fa#FaTrash JavaScript Examples

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/provider/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/provider/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/provider/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="store-list__button" to={`/store/view/${value}`}>
      <FaSearch className="store-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="store-list__button" to={`/store/update/${value}`}>
      <FaEdit className="store-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="store-list__button" to={`/store/remove/${value}`}>
      <FaTrash className="store-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product-type/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product-type/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product-type/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="producttype-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="producttype-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="producttype-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="producttype-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="producttype-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="producttype-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

Trash = memo(FaTrash)

ActionsButton = injector(observer(({ store, size, hasSelected, ...rest }) => {
  const formRef = useRef();
  const selectedCount = store.currentView.selectedCount;
  const actions = store.availableActions
    .filter((a) => !a.hidden)
    .sort((a, b) => a.order - b.order);

  const invokeAction = (action, destructive) => {
    if (action.dialog) {
      const { type: dialogType, text, form } = action.dialog;
      const dialog = Modal[dialogType] ?? Modal.confirm;

      dialog({
        title: destructive ? "Destructive action." : "Confirm action.",
        body: buildDialogContent(text, form, formRef),
        buttonLook: destructive ? "destructive" : "primary",
        onOk() {
          const body = formRef.current?.assembleFormData({ asJSON: true });

          store.invokeAction(action.id, { body });
        },
      });
    } else {
      store.invokeAction(action.id);
    }
  };

  const actionButtons = actions.map((action) => {
    const isDeleteAction = action.id.includes("delete");

    return (
      <Menu.Item
        size={size}
        key={action.id}
        danger={isDeleteAction}
        onClick={() => {
          invokeAction(action, isDeleteAction);
        }}
        icon={isDeleteAction && <FaTrash />}
      >
        {action.title}
      </Menu.Item>
    );
  });

  return (
    <Dropdown.Trigger content={<Menu size="compact">{actionButtons}</Menu>} disabled={!hasSelected}>
      <Button size={size} disabled={!hasSelected} {...rest} >
        {selectedCount > 0 && selectedCount} Tasks
        <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />
      </Button>
    </Dropdown.Trigger>
  );
}))

FilterLine = observer(({
  filter,
  availableFilters,
  index,
  view,
  sidebar,
  dropdownClassName,
}) => {
  return (
    <Block name="filter-line" tag={Fragment}>
      <GroupWrapper wrap={sidebar}>
        <Elem name="column" mix="conjunction">
          {index === 0 ? (
            <span style={{ fontSize: 12, paddingRight: 5 }}>Where</span>
          ) : (
            <Conjunction index={index} view={view} />
          )}
        </Elem>
        <Elem name="column" mix="field">
          <FilterDropdown
            placeholder="Column"
            defaultValue={filter.filter.id}
            items={availableFilters}
            width={80}
            dropdownWidth={120}
            dropdownClassName={dropdownClassName}
            onChange={(value) => filter.setFilterDelayed(value)}
            optionRender={({ item: { original: filter } }) => (
              <Elem name="selector">
                {filter.field.title}
                {filter.field.parent && (
                  <Tag
                    size="small"
                    className="filters-data-tag"
                    color="#1d91e4"
                    style={{ marginLeft: 7 }}
                  >
                    {filter.field.parent.title}
                  </Tag>
                )}
              </Elem>
            )}
          />
        </Elem>
      </GroupWrapper>
      <GroupWrapper wrap={sidebar}>
        <FilterOperation
          filter={filter}
          value={filter.currentValue}
          operator={filter.operator}
          field={filter.field}
        />
      </GroupWrapper>
      <Elem name="remove">
        <Button
          type="link"
          onClick={(e) => {
            e.stopPropagation();
            filter.delete();
          }}
          icon={<Icon icon={FaTrash} size={12} />}
        />
      </Elem>
    </Block>
  );
},
)

Auditorias = ({history}) => {

    const refFire = useFirestore();
    const [auditorias, setAuditorias] = useState([])

    useEffect(() =>{
        const traerDatos = async () => {
            const temporales = []
            const snapshot = await refFire.collection('auditorias').get()
            snapshot.docs.forEach((doc)=>{
                const elem = {
                    id: doc.id,
                    ...doc.data()
                }
                temporales.push(elem)
            })
            setAuditorias(temporales)
        } 

        traerDatos()
    }, [refFire])
    
    const eliminar = async (id) => {
        const respuesta = window.confirm('Seguro que quiere eliminar?');
        if (respuesta) {
            await refFire.collection('auditorias').doc(id).delete();
            toast('Eliminado')
            const temp = auditorias.filter((auditorias)=> {
                console.log(auditorias, id)
                return auditorias.id !== id
            })
            setAuditorias(temp)
            
        }
    }

    const setActual = async(id) => {
        let batch = refFire.batch();
        auditorias.forEach( (audit) => {
            let elem = refFire.collection('auditorias').doc(audit.id)
            const actual = audit.id === id ? true : false;
            batch.update(elem, { actual})
        })
        await batch.commit();
        // await refFire.collection('auditorias').doc(id).update({actual: true})
        toast('Actualizado')
    }

    return (
        <div className="card">
            <div className="card-body">
                <h2 className="card-title">Auditoria </h2>
                <Link className="btn btn-primary" to="/auditorias/add">
                    <FaPlus style={{ marginRight: '5px', marginTop: '-3px' }} />
                    Crear
                </Link>

                    <table className="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Nro</th>
                                <th>Fecha</th>
                                <th>Iglesia</th>
                                <th>Actual</th>
                                <th>Activo</th>
                                <th>Editar</th>
                            </tr>
                        </thead>

                        <tbody>
                            {
                                auditorias.map((audit, index) => (
                                    <tr key ={audit.id}>
                                        <td>{index + 1}</td>
                                        <td>{audit.fecha}</td>
                                        <td>{}</td>
                                        <td>
                                            {audit.actual 
                                            ?
                                                'Actual'
                                            :
                                            <button onClick={()=> setActual(audit.id)} className="btn  btn-primary btn-xm" >
                                                Poner como actual
                                            </button>
                                            }
                                        </td>
                                        <td>{audit.activo ? 'Si' : 'No'}</td>
                                        <td>
                                            <button onClick={ () => {
                                                history.push(`/auditorias/edit/${audit.id}`)
                                            }} 
                                            className="btn btn-success btn-sm">
                                                <FaPen />
                                            </button>
                                            <button onClick={() => eliminar(audit.id)} className="btn btn-danger btn-sm"> 
                                                <FaTrash />
                                            </button>
                                        </td>
                                    </tr>

                                ))
                            }
                        </tbody>
                    </table>
            </div>
        </div>
    )
}

export default function NotesPreview({ note, setNoteInPreview }) {
    const dispatch = useDispatch();
    const [editNote, setEditNote] = useState();
    const [noteContent, setNoteContent] = useState();
    const [noteColor, setNoteColor] = useState();

    useEffect(() => {
        if (note !== null) {
            setNoteContent(note.content);
            setNoteColor(note.color);
            setEditNote(true);
        }
    }, [note]);

    const handleContentChange = (updatedNoteContent) => {
        setNoteContent(updatedNoteContent);
        debouncedUpdateNoteContent(dispatch, note.id, updatedNoteContent);
    };

    const handleColorUpdate = (note, noteColor) => {
        let updatePayload = {
            id: note.id,
            noteColor,
        };
        dispatch(update(updatePayload));
        setNoteColor(noteColor);
    };

    const handleDeleteNoteAction = (id) => {
        dispatch(remove(id));
        setNoteInPreview(null);
    };

    const handleCloseAction = () => {
        dispatch(remove(null)); // clears all empty body notes
        setNoteInPreview(null);
    };

    return (
        <AnimatePresence>
            <NotesPreviewContainer
                initial={{
                    flex: note === null ? "0 1 0" : "2 1 0",
                }}
                animate={{
                    flex: note === null ? "0 1 0" : "2 1 0",
                }}
            >
                {note !== null && (
                    <>
                        <NoteActionMenu>
                            <MenuActionButtonGroup>
                                <MenuActionButton onClick={() => handleCloseAction()}>
                                    <FaArrowRight data-for="closeAction" data-tip="" />
                                    <ReactTooltip id="closeAction" getContent={() => "Close Note"} />
                                </MenuActionButton>
                                <MenuActionButton data-for="viewOrEditAction" data-tip="" onClick={() => setEditNote(!editNote)}>
                                    {editNote ? <AiFillEye /> : <RiFileEditFill />}
                                    <ReactTooltip id="viewOrEditAction" getContent={() => (editNote ? "View Markdown" : "Edit Note")} />
                                </MenuActionButton>
                                <MenuActionButton onClick={() => navigator.clipboard.writeText(noteContent)}>
                                    <FaClipboard data-for="copyAction" data-tip="" />
                                    <ReactTooltip id="copyAction" getContent={() => "Copy Note"} />
                                </MenuActionButton>

                                <MenuActionButton onClick={() => handleDeleteNoteAction(note.id)}>
                                    <FaTrash data-for="deleteAction" data-tip="" />
                                    <ReactTooltip id="deleteAction" getContent={() => "Delete Note"} />
                                </MenuActionButton>
                            </MenuActionButtonGroup>
                            <NoteColorSelectionBox>
                                {Object.keys(colorOptions).map((color, idx) => (
                                    <ColorOption
                                        key={idx}
                                        onClick={() => handleColorUpdate(note, colorOptions[color])}
                                        isSelected={noteColor === colorOptions[color]}
                                        color={colorOptions[color]}
                                    />
                                ))}
                            </NoteColorSelectionBox>
                        </NoteActionMenu>
                        <NoteContentDiv>
                            {editNote ? (
                                <EditNoteInput
                                    placeholder="Type note here.."
                                    autoFocus
                                    type="text"
                                    value={noteContent}
                                    onChange={(e) => handleContentChange(e.target.value)}
                                />
                            ) : (
                                <MarkdownWrapper>
                                    <ReactMarkdown children={noteContent} />
                                </MarkdownWrapper>
                            )}
                        </NoteContentDiv>
                    </>
                )}
            </NotesPreviewContainer>
        </AnimatePresence>
    );
}

MapAndAttachments = ({ form, data }) => {
	const { attachments } = data.technology;
	const imgsRef = useRef(null);
	const pdfRef = useRef(null);
	const [whereIsAlreadyImplemented, setWhereIsAlreadyImplemented] = useState([]);
	const [whereIsAlreadyImplementedInput, setWhereIsAlreadyImplementedInput] = useState('');
	const [whoDevelop, setWhoDevelop] = useState([]);
	const [whoDevelopInput, setWhoDevelopInput] = useState('');
	const [previewedImgFiles, setPreviewedImgFiles] = useState(attachments.images);
	const [previewedPdfFiles, setPreviewedPdfFiles] = useState(attachments.documents);
	const [uploadError, setUploadError] = useState(false);
	const [videos, setVideos] = useState(data.technology.videos || []);
	const { control } = form;

	useEffect(() => {
		const whereIsAlreadyImplementedParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
			data.technology?.locations,
		);
		setWhereIsAlreadyImplemented(whereIsAlreadyImplementedParsed);

		const whoDevelopParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHO_DEVELOP,
			data.technology?.locations,
		);
		setWhoDevelop(whoDevelopParsed);
	}, []);

	useEffect(() => {
		whoDevelop.forEach((element, index) => {
			form.setValue(`locations.who_develop.${index}`, element.id);
		});
	}, [whoDevelop]);

	useEffect(() => {
		whereIsAlreadyImplemented.forEach((element, index) => {
			form.setValue(`locations.where_is_already_implemented.${index}`, element.id);
		});
	}, [whereIsAlreadyImplemented]);

	useEffect(() => {
		form.setValue('videos', JSON.stringify(videos));
	}, [videos]);

	const onAddVideos = (link) => {
		if (!link || link === '') {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
			return;
		}

		const videoId = getYoutubeVideoId(link);

		if (videoId) {
			form.clearErrors('link_video');
			const alreadyExists = videos.some((video) => video?.videoId === videoId);

			if (!alreadyExists) {
				setVideos((prevState) => [
					{
						thumbnail: `http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg`,
						link,
						videoId,
						provider: 'Youtube',
					},
					...prevState,
				]);
				form.setValue('link_video', '');
			} else {
				form.setError('link_video', {
					type: 'manual',
					message: 'O vídeo já foi adicionado',
				});
			}
		} else {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
		}
	};

	const onRemoveVideos = (index) => setVideos(videos.filter((video, idx) => idx !== index));

	// eslint-disable-next-line consistent-return
	const onDropAttachments = async (acceptedFiles, type) => {
		if (!acceptedFiles) return null;

		const formData = new FormData();
		for (let index = 0; index < acceptedFiles.length; index += 1) {
			formData.append(`files[${index}]`, acceptedFiles[index], acceptedFiles[index].name);
		}

		formData.append(
			'meta',
			JSON.stringify({
				object: 'technologies',
				object_id: form.getValues('id'),
			}),
		);

		try {
			const response = await upload(formData);
			if (response.status === 200) {
				if (type === 'img') {
					const newValue = [...previewedImgFiles, ...response.data];
					setPreviewedImgFiles(newValue);
				}

				if (type === 'pdf') {
					const newValue = [...previewedPdfFiles, ...response.data];
					setPreviewedPdfFiles(newValue);
				}
			} else {
				setUploadError(response.data.error.message[0].message);
			}
		} catch (error) {
			setUploadError(
				'Ocorreu um error ao fazer o upload, verifique se você seguiu as instruções corretamente, checando o tipo de arquivo e o tamanho dele',
			);
		}
	};

	const deleteAttachment = async ({ index, element, type }) => {
		await deleteUpload(element.id);
		if (type === 'img') {
			setPreviewedImgFiles(
				previewedImgFiles.filter((media, innerIndex) => index !== innerIndex),
			);
		}
		if (type === 'pdf') {
			setPreviewedPdfFiles(
				previewedPdfFiles.filter((pdf, innerIndex) => index !== innerIndex),
			);
		}
	};

	const deleteFromCollection = async (index, collection) => {
		if (collection === 'whoDevelop') {
			setWhoDevelop((prevState) => prevState.filter((_, innerIndex) => index !== innerIndex));
			return;
		}

		if (collection === 'whereIsAlreadyImplemented') {
			setWhereIsAlreadyImplemented((prevState) =>
				prevState.filter((_, innerIndex) => index !== innerIndex),
			);
		}
	};

	const onSelect = async ({ properties, locationType }) => {
		const state =
			locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED
				? whereIsAlreadyImplemented
				: whoDevelop;
		const toBePushed = properties;
		if (state.some((element) => element.placeId === toBePushed.placeId)) {
			return;
		}
		const response = await geocodeByPlaceId(toBePushed.placeId);
		if (response) {
			toBePushed.location = {
				lat: response[0].geometry.location.lat(),
				lng: response[0].geometry.location.lng(),
			};
		}

		const createResponse = await createLocation({
			place_id: toBePushed.placeId,
			address: toBePushed.description,
			lat: toBePushed.location?.lat?.toString(),
			lng: toBePushed.location?.lng?.toString(),
		});

		if (createResponse.error) {
			toast.error(
				createResponse.messages?.[0]?.message ||
					'Ocorreu um erro para salvar sua localização, tente novamente em instantes.',
			);
			return;
		}

		const newState = [
			...state,
			{ ...toBePushed, locationType, id: createResponse.location.id },
		];
		if (locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED) {
			setWhereIsAlreadyImplemented(newState);
			setWhereIsAlreadyImplementedInput('');
		} else {
			setWhoDevelop(newState);
			setWhoDevelopInput('');
		}
	};

	return (
		<Wrapper>
			<HelpModal show={!!uploadError} onHide={() => setUploadError(false)}>
				{uploadError}
			</HelpModal>
			<Row>
				<Column>
					<Row>
						<Column>
							<Title>Onde a Tecnologia é desenvolvida?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="who_develop"
								name="who_develop"
								value={whoDevelopInput}
								onChange={(value) => setWhoDevelopInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType: technologyLocationsEnum.WHO_DEVELOP,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar instituições e empresas...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															key={suggestion.placeId}
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whoDevelop.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(index, 'whoDevelop')
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.who_develop.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
					<Row>
						<Column>
							<Title>Onde a Tecnologia pode ser aplicada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<SelectField
								form={form}
								id="where_can_be_applied"
								label="Região"
								name="terms.where_can_be_applied"
								placeholder="Escolha uma região"
								validation={{ required: true }}
								options={[
									{
										value: 'semiarido',
										label: 'Semiárido',
									},
								]}
							/>
						</Column>
					</Row>

					<Row>
						<Column>
							<Title>Onde a Tecnologia já está implantada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="where_is_already_implemented"
								name="where_is_already_implemented"
								value={whereIsAlreadyImplementedInput}
								onChange={(value) => setWhereIsAlreadyImplementedInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType:
											technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar localidades...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
															key={suggestion.placeId}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whereIsAlreadyImplemented.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(
													index,
													'whereIsAlreadyImplemented',
												)
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.where_is_already_implemented.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
				</Column>
				<Column>
					<Title>Fotos da tecnologia</Title>
					<Dropzone
						accept="image/*"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'img')}
						ref={imgsRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>1280px x 720px</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedImages data-cy="uploaded-images">
						<Controller
							render={({ field }) => (
								<ImagesPreview
									{...field}
									previewedImgFiles={previewedImgFiles}
									deleteAttachment={deleteAttachment}
								/>
							)}
							name="thumbnail_id"
							control={control}
						/>
					</UploadedImages>

					<Title>Videos da tecnologia</Title>
					<VideoContainer>
						<InputVideoWrapper>
							<InputField
								form={form}
								type="url"
								name="link_video"
								placeholder="Link do Youtube"
							/>
							<InputHiddenField form={form} type="hidden" name="videos" />
							<ButtonVideoAdd
								type="button"
								variant="secondary"
								onClick={() => onAddVideos(form.getValues('link_video'))}
							>
								Adicionar
							</ButtonVideoAdd>
						</InputVideoWrapper>
						{videos?.length ? (
							<VideosWrapper>
								{videos.map((video, idx) => (
									<VideoItem key={`video_${video.videoId}`}>
										<a
											href={`//www.youtube.com/watch?v=${video.videoId}`}
											target="_blank"
											rel="noreferrer"
										>
											<img
												src={video.thumbnail}
												alt={`Youtube vídeo ${video.videoId}`}
											/>
										</a>
										<RemoveVideoButton
											type="button"
											onClick={() => onRemoveVideos(idx)}
										>
											Remover
										</RemoveVideoButton>
									</VideoItem>
								))}
							</VideosWrapper>
						) : (
							<EmptyVideos>
								<p>Nenhum vídeo adicionado</p>
							</EmptyVideos>
						)}
					</VideoContainer>

					<Title>Documentos</Title>
					<Dropzone
						accept=".pdf"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'pdf')}
						ref={pdfRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>.PDF</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedDocuments>
						{previewedPdfFiles?.map((element, index) => {
							return (
								<IconRow row>
									<IconLink href={element.url}>
										<FaFilePdf size="2rem" /> {element.filename}
									</IconLink>
									<CircularButton
										variant="remove"
										height="2"
										width="2"
										onClick={() =>
											deleteAttachment({
												index,
												element,
												type: 'pdf',
											})
										}
									>
										<FaTrash size="1em" />
									</CircularButton>
								</IconRow>
							);
						})}
					</UploadedDocuments>
				</Column>
			</Row>
		</Wrapper>
	);
}