avances reviews, falta conectar con backend

src/components/NewPublicacion.jsx

@@ -28,6 +28,7 @@ const NewPublicacion = ({ title, description, image, price, rating, location, ca
             <div className='publicacion-descripcion'>
                 {description}
             </div>
+
         </div>
     </div>
 

src/components/NewPublicacionInfo.jsx

@@ -6,6 +6,7 @@ import { MapPin } from 'lucide-react'
 import lugares from './lugares';
 import '../styles/calendario.css';
 import { useParams } from 'react-router-dom';
+import ReviewForm from './ReviewForm';
 
 const NewPublicacionInfo = ({id}) => {
     // definir un estado para guardar la información de la publicación
@@ -83,17 +84,9 @@ const NewPublicacionInfo = ({id}) => {
                         <hr /> {/* linea separadora */}
                         <p className='event-description'> {selectedEvent.descripcion}</p>
                         <p className='event-description'>Contacto: {selectedEvent.contacto}</p>
-
-                        {/* reviews */}
-                        <p className='event-subtitle'>Reseñas</p>
-                        <hr /> {/* linea separadora */}
-                        {selectedEvent.reseñas.map((review, index) => (
-                            <div key={index} className='event-reviews'>
-                                <p className='event-description'>
-                                    {review.puntuacion} ★ - {review.comentario}
-                                </p>
-                            </div>
-                        ))}
+
+                        {/* Dejar comentario */}
+                        <ReviewForm />
                         {/* link a Google Maps */}
                         <a
                             href={`https://www.google.com/maps/search/?api=1&query=${selectedEvent.lat},${selectedEvent.lng}`}
@@ -105,6 +98,7 @@ const NewPublicacionInfo = ({id}) => {
                         </a>
                         <hr /> {/* linea separadora */}
                         {/* Reportar */}
+
                         <button className='little-button'>Reportar</button>
                     </div>
                 </div>

src/components/NewPublicaciones.jsx

@@ -20,6 +20,7 @@ const Publicaciones = ({ publicaciones }) => {
             subcategory={publicacion.subcategoria}
             date={publicacion.fecha}
             id={publicacion.id}
+
           />
         ))}
     </div>

src/components/ReviewForm.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import StarRating from './StarRating'; // Asegúrate de importar el componente StarRating
+
+const ReviewForm = () => {
+  const [rating, setRating] = useState(0);
+  const [comment, setComment] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Aquí puedes manejar el envío del formulario, por ejemplo, enviando los datos a una API
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="review-form">
+      <p className='event-subtitle'>Puntuar</p>
+      <hr />
+      <StarRating rating={rating} setRating={setRating} />
+      <button type="submit">Enviar</button>
+
+    </form>
+
+  );
+};
+
+export default ReviewForm;

src/components/StarRating.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import '../styles/ReviewForm.css';
+const StarRating = ({ rating, setRating }) => {
+  const handleStarClick = (index) => {
+    setRating(index + 1);
+  };
+
+  return (
+    <div className="star-rating">
+      {[...Array(5)].map((star, index) => (
+        <span
+          key={index}
+          className={index < rating ? 'star filled' : 'star'}
+          onClick={() => handleStarClick(index)}
+        >
+          {index < rating ? '★' : '☆'}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default StarRating;

src/styles/ReviewForm.css

@@ -0,0 +1,14 @@
+.star-rating {
+  display: flex;
+  gap: 5px;
+}
+
+.star {
+  cursor: pointer;
+  font-size: 2rem;
+  color: #ccc;
+}
+
+.star.filled {
+  color: #f39c12;
+}