Se crea el componente y los estilos para el área de subir imágenes y su visualización

.multiple_images_dropzone_root{

  width: 100%;

  height: 100px;

  display: flex;

  flex-direction: column;

}

.multiple_image_dropzone{

  height: 20%;

  width: 100%;

  cursor: pointer;

  border-color: #eeeeee;

  border-style: dashed;

  background-color: #fafafa;

  outline: none;

  display: flex;

  justify-content: center;

  align-items: center;

}

.multiple_image_dropzone:hover {

  border-color: rgb(106, 188, 226);

  color: rgb(43, 38, 38);

}

.previews_list_cnt{

  height: 80%;

  width: 100%;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: start;

  overflow-x: auto;

}

.previews_list_cnt .preview{

  display: inline-flex;

  border-radius: 2;

  cursor: pointer;

  border: 2px solid #eaeaea;

  width: 60px;

  height: 60px;

  box-sizing: border-box;

  margin-right: 2px;

  position: relative;

}

.previews_list_cnt .preview:hover{

  border: 2px solid #aba7a7;

}

.previews_list_cnt .preview .remove_button{

  position: absolute;

  right: 0px;

  cursor: pointer;

  color: red;

}

.previews_list_cnt .preview .preview_inner{

  display: flex;

  min-width: 0;

  overflow: hidden;

}

.previews_list_cnt .preview .preview_inner img{

  display: block;

  width: auto;

  height: 100%;

}

 No newline at end of file

import { UseFormSetValue } from "react-hook-form";

import { PlaceFormValues } from "../../infraestructure/entities/place";

import { useDropzoneMultiplesImages } from "../../hooks/useDropzoneMultiplesImages";

import "./assets/css/styles.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";

interface props{

  setValue: UseFormSetValue<PlaceFormValues>;

}

export const MultipleImagesDropzone = ({setValue}:props) => {

  const {

    getRootProps, 

    getInputProps,

    imagesFiles,

    removeImage,

  } = useDropzoneMultiplesImages(setValue);

  return (

    <div className="multiple_images_dropzone_root">

      <div {...getRootProps({className: "multiple_image_dropzone"})}>

        <input {...getInputProps()}/>

        <p>Arrastra tu imagen o seleccionala dando click aquí.</p>

      </div>

      <div className="previews_list_cnt">

        {

          imagesFiles &&

          imagesFiles.map((image, index) => {

            return (

              <div className="preview" key={image.file.name}

                onClick={() => {

                }}

              >

                <div className="preview_inner">

                  <img

                    src={image.preview}

                    onLoad={() => {URL.revokeObjectURL(image.preview)}}

                  />

                </div>

                <FontAwesomeIcon key={index} className="remove_button" icon={faTimesCircle}

                  onClick={() => removeImage(index)}

                />

              </div>

            );

          })

        }

      </div>

    </div>

  );

}