-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'development' into feat/post-page-info
- Loading branch information
Showing
50 changed files
with
5,677 additions
and
1,396 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { useState } from 'react'; | ||
| import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'; | ||
|
|
||
| const containerStyle = { | ||
| height: '400px', // Ajusta el tamaño del contenedor si es necesario | ||
| width: '100%', | ||
| }; | ||
|
|
||
| const center = { | ||
| lat: -33.45694, // Coordenadas iniciales para Santiago, Chile | ||
| lng: -70.64827, | ||
| }; | ||
|
|
||
| const GoogleMapSelectLocation = ({ onLocationSelect }) => { | ||
| const [selectedLocation, setSelectedLocation] = useState(null); | ||
|
|
||
| const handleMapClick = (event) => { | ||
| const location = { | ||
| lat: event.latLng.lat(), | ||
| lng: event.latLng.lng(), | ||
| }; | ||
| setSelectedLocation(location); | ||
|
|
||
| //Llamada a la API de Geocoding | ||
| const geocoder = new window.google.maps.Geocoder(); | ||
| geocoder.geocode({ location }, (results, status) => { | ||
| if (status === "OK") { | ||
| if (results[0]) { | ||
| const address = results[0].formatted_address; | ||
| onLocationSelect(address); // Pasar la dirección al formulario | ||
| } else { | ||
| console.log("No se encontraron resultados"); | ||
| } | ||
| } else { | ||
| console.log("Geocoder falló debido a: " + status); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <LoadScript googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}> | ||
| <GoogleMap | ||
| mapContainerStyle={containerStyle} | ||
| center={center} | ||
| zoom={12} | ||
| onClick={handleMapClick} // Añade la función para manejar clics en el mapa | ||
| > | ||
| {selectedLocation && ( | ||
| <Marker | ||
| position={selectedLocation} | ||
| title="Ubicación seleccionada" | ||
| /> | ||
| )} | ||
| </GoogleMap> | ||
| </LoadScript> | ||
| ); | ||
| }; | ||
|
|
||
| export default GoogleMapSelectLocation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.