forms

package.json

@@ -14,13 +14,16 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@material-tailwind/react": "^2.1.10",
+    "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.10",
     "@mui/material": "^6.1.2",
     "@mui/system": "^6.1.2",
     "@mui/x-date-pickers": "^7.19.0",
-    "@react-google-maps/api": "^2.19.3",
+    "@react-google-maps/api": "^2.20.3",
     "aws-sdk": "^2.1691.0",
     "axios": "^1.7.7",
+    "browser-image-compression": "^2.0.2",
+    "compress.js": "1.1.2",
     "date-fns": "2.29.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/ImageUpload.css

@@ -0,0 +1,43 @@
+.image-upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .dropzone {
+    background-color: #f9fafb; /* Color de fondo más claro */
+    transition: background-color 0.2s;
+  }
+
+  .dropzone:hover {
+    background-color: #e5e7eb; /* Color de fondo al pasar el mouse */
+  }
+
+  .image-preview {
+    margin-top: 0.5rem;
+    width: 100%; /* Asegúrate de que ocupe todo el ancho de su contenedor */
+    height: 150px; /* Altura fija para todas las imágenes */
+    object-fit: cover; /* Mantener la relación de aspecto y recortar si es necesario */
+  }
+
+  .font-medium {
+    padding-left: 10px;
+    margin-bottom: 70px;
+  }
+  .absolute{
+    position: absolute;
+    border: none;
+    background-color: transparent;
+  }
+  .absolute:hover{
+    color: #666;
+  }
+  .flex{
+    display: flex flex-wrap; 
+  }
+
+
+
+
+
+
+

src/components/ImageUpload2.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import DeleteIcon from '@mui/icons-material/Cancel';
+import './ImageUpload.css';
+import logo from '../assets/logoo.png';
+import imageCompression from 'browser-image-compression'; // Importa la nueva librería
+
+function ImageUpload({ files, setFiles }) {
+  const [error, setError] = useState('');
+
+  const onDrop = async acceptedFiles => {
+    if (acceptedFiles.length + files.length > 5) {
+      setError('Solo se permiten un máximo de 5 imágenes');
+      return;
+    }
+
+    setError('');
+
+    const newFiles = await Promise.all(
+      acceptedFiles.map(async file => {
+        const options = {
+          maxSizeMB: 1, // Ajusta el tamaño máximo de la imagen
+          maxWidthOrHeight: 800, // Cambia el tamaño máximo
+          useWebWorker: true,
+        };
+        const compressedFile = await imageCompression(file, options);
+        return Object.assign(compressedFile, {
+          preview: URL.createObjectURL(compressedFile)
+        });
+      })
+    );
+
+    setFiles(prevFiles => [...prevFiles, ...newFiles]);
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: 'image/jpeg, image/png',
+    maxFiles: 5,
+    maxSize: 5000000 // 5MB
+  });
+
+  return (
+    <div className="image-upload-container mb-4">
+      <label className="block text-sm font-medium text-black">
+        <h2>Cargar imágenes de publicación</h2>
+      </label>
+      <div className="dropzone mt-1 flex justify-center rounded-lg border-2 border-dashed border-gray-300 px-6 pb-6 pt-4">
+        <div {...getRootProps()} className="cursor-pointer flex flex-wrap">
+          <input {...getInputProps()} />
+          <div className="text-center w-full">
+            <div className="text-xs text-gray-600">
+              <span className="font-medium text-indigo-600" style={{ marginBottom: '0.5rem' }}>
+                Hasta 5 imágenes en formato PNG o JPG
+              </span>
+            </div>
+            <svg
+              className="mx-auto h-6 w-6 text-black mb-2"
+              stroke="currentColor"
+              fill="none"
+              viewBox="0 0 150 40"
+              aria-hidden="true"
+            >
+              <path
+                d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                transform='scale(0.5)'
+              />
+            </svg>
+          </div>
+
+          {/* Aquí es donde renderizamos las imágenes dentro del dropzone */}
+          <div className="flex flex-wrap w-full mt-4">
+            {files.map((file, index) => (
+              <div className="relative mb-4 w-1/3 px-2" key={file.name}>
+                <img
+                  className="image-preview rounded-lg shadow-md resizeable"
+                  src={file.preview}
+                  alt={file.name}
+                  style={{ width: "30%", height: "auto" }} // ajustar tamaño
+                />
+                <img
+                  src={logo}
+                  alt="Watermark"
+                  style={{ width: "3%", height: "auto", objectFit: "contain" , opacity: "0.5", 
+                     bottom: "0", right: "10" }} //poner el logo dentro de la imagen ahora esta afuera}} //poner el logo dentro de la imagen ahora esta afuera
+                  className="absolute2 bottom-0 right-0 w-1/3 h-1/3 opacity-50" // Ajusta la posición y tamaño del logo
+                />
+                <button
+                  className="absolute right-0 top-0 rounded-md bg-transparent border border-gray-300 p-1 hover:bg-gray-200"
+                  type="button"
+                  onClick={() => {
+                    const newFiles = files.filter((_, idx) => idx !== index);
+                    setFiles(newFiles);
+                    URL.revokeObjectURL(file.preview);
+                    setError('');
+                  }}
+                >
+                  <DeleteIcon />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {error && <p className="text-red-500 text-sm">{error}</p>}
+    </div>
+  );
+}
+
+export default ImageUpload;

src/components/TailwinSvgIcons/CrossDeleteIcon2.jsx

@@ -0,0 +1,19 @@
+export default function CrossDeleteIcon() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        stroke="currentColor"
+        className="h-6 w-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    );
+  }
+

src/pages/users/publicar.jsx

@@ -3,7 +3,7 @@ import { Stepper, Step, StepLabel, Button, Typography, Box, Tab, Tabs, FormHelpe
 import { Link } from 'react-router-dom';
 import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
-import ImageUpload from '../../components/ImageUpload';
+import ImageUpload from '../../components/ImageUpload2';
 import TurismoForm from './zturismo.jsx';
 import CentrosDeportivosForm from './zcentros.jsx';
 import EventosForm from './zeventos.jsx';