feat: add view of a post

iic2154-uc-cl · Nov 5, 2024 · 967ca52 · 967ca52
1 parent f69a9c6
commit 967ca52
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/src/components/NewPublicacionInfo.jsx b/src/components/NewPublicacionInfo.jsx
@@ -40,17 +40,21 @@ const NewPublicacionInfo = ({id}) => {
     return (
             <>
             <Navbar />
+
             <div className="event-page">
+
                 {selectedEvent ? (
                 <div className='event-info'>
                     <div className='event-image-container'>
+                        {/* Volver */}
+                        <button className='back-button' onClick={() => window.history.back()}>atrás</button>
                         <img src={selectedEvent.imagen} alt={selectedEvent.nombre} className='event-image' />
                     </div>
                     <div className='event-text-container'>
                         {/* titulo */}
                         <p className='event-title'>{selectedEvent.nombre}</p>
                         {/* subcategoría */}
-                        <p className='event-subtitle'>{selectedEvent.subcategoria}</p>
+                        <p className='event-subcategory'>{selectedEvent.subcategoria}</p>
 
                         {/* rating ★★★☆☆☆ */}
                         <p className='event-rating'>

diff --git a/src/components/NewPublicaciones.jsx b/src/components/NewPublicaciones.jsx
@@ -19,6 +19,7 @@ const Publicaciones = ({ publicaciones }) => {
             category={publicacion.categoria}
             subcategory={publicacion.subcategoria}
             date={publicacion.fecha}
+            id={publicacion.id}
           />
         ))}
     </div>

diff --git a/src/styles/calendario.css b/src/styles/calendario.css
@@ -200,6 +200,30 @@
    color: var(--principal-color);
 }
 
+.back-button {
+    font-size: 12px;
+    font-weight: 400;
+    padding: 8px;
+    background-color: transparent;
+    border: 2px solid var(--principal-color);
+    margin: 10px 0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.6s;
+}
+
+.event-subcategory {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--principal-color);
+    border: 2px solid var(--principal-color);
+    padding: 5px;
+    border-radius: 8px;
+    margin: 10px 0;
+    /* fit-content */
+    display: inline-block;
+}
+
 /* mayor a 1280px */
 @media (min-width: 1440px) {
     /* Cuadriculas meses */
@@ -222,12 +246,17 @@
         text-align: center;
     }
 
-    .events-panel, .calendar-panel, .event-details {
+    .event-page .event-info {
+        display: block;
+        padding: 20px;   
+    }
+
+    .events-panel, .calendar-panel, .event-details, .event-image-container, .event-text-container {
         min-width: 90%;
         max-width: 90%;
     }
 
-    .event-details, .events-panel {
+    .event-details, .events-panel, .event-image-container, .event-text-container {
         max-height: fit-content;
         min-height: fit-content;
     }