Lista de actividades y voluntarios - primera version

client/src/abuelos/Styles/Activities.css

@@ -0,0 +1,54 @@
+.card {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    padding: 20px;
+    max-width: 600px;
+    margin: 0 auto 20px auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card img {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .card h3 {
+    font-size: 24px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .card h4 {
+    font-size: 18px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    margin: 0 auto;
+    max-width: 960px;
+    padding: 20px;
+  }
+  .participar-btn {
+    background-color: #008080;
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+  }
+  .button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+  }

client/src/abuelos/Styles/Volunteers.css

@@ -0,0 +1,36 @@
+.participante-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 250px;
+    margin: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+  }
+
+  .participante-card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .participante-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .participante-card p {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  .participante-card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    margin-bottom: 10px;
+  }
+.detalles {
+    box-shadow: none;
+}

client/src/abuelos/pages/Activities.jsx

@@ -1,7 +1,40 @@
-import React from 'react'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import '../Styles/Activities.css'
 
 export const Activities = () => {
+
+    const [actividades, setActividades] = useState([])
+    useEffect(() => {
+
+        const GetData = async () => {
+            const res = await axios.get('http://localhost:8080/api/actividad', {
+            })
+            setActividades(res.data.actividades);
+        }
+        GetData();
+
+    }, [])
+    function handleParticipar(nombreActividad) {
+        alert(`¡Me gustaría participar en ${nombreActividad}!`);
+      }
     return (
-        <div>Activities</div>
+        <>
+<div className='container'>
+  {actividades.map((actividad, index) =>
+    <div className="card" key={index}>
+      <img src={`http://localhost:8080/api/uploads/actividad/${actividad?.uid}`} style={{ "width": '100%' }} />
+      <div className="container">
+        <h3>{actividad.nombre}</h3>
+        <h4>{actividad.descripcion}</h4>
+        <div className="button-container">
+          <button className="participar-btn" onClick={() => handleParticipar(actividad.nombre)}>Participar</button>
+        </div>
+      </div>
+    </div>
+  )}
+</div>
+        </>
     )
+
 }

client/src/abuelos/pages/UsuariosLista.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { NavLink, Link} from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 import useArreglo from '../../hooks/useArreglo';
 import '../Styles/UsuarioLista.css';
 
@@ -11,67 +11,69 @@ export const UsuariosLista = () => {
     const { token } = JSON.parse(localStorage.getItem('user'));
     const [contDetate, setContDetate] = useState(0);
 
-   
-    
+
+
     useEffect(() => {
-
-      const GetData = async ()=>{
-        const res = await axios.get('http://localhost:8080/api/usuarios',{params: {
-           desde: 5*option
-          }})
-        setUsuarios(res.data.usuarios);
-        setPage(useArreglo(Math.ceil((res.data.total/5))))
-      }
-      GetData();
-    }, [option,contDetate])
-    const delate = async(id)=>{
+
+        const GetData = async () => {
+            const res = await axios.get('http://localhost:8080/api/usuarios', {
+                params: {
+                    desde: 5 * option
+                }
+            })
+            setUsuarios(res.data.usuarios);
+            setPage(useArreglo(Math.ceil((res.data.total / 5))))
+        }
+        GetData();
+    }, [option, contDetate])
+    const delate = async (id) => {
         try {
-            await axios.delete(`http://localhost:8080/api/usuarios/${id}`,{
+            await axios.delete(`http://localhost:8080/api/usuarios/${id}`, {
                 headers: {
                     'x-token': `${token}`
                 }
             })
-            setContDetate((contDetate==0?1:0))
+            setContDetate((contDetate == 0 ? 1 : 0))
         } catch (error) {
             console.log(error)
         }
-        
+
     }
     return (
         <>
             <div className=" detalles">
-        <table>
-                <thead>
-                    <tr>
-                        <td>Nombre Usuario</td>
-                        <td>Correo Electronico</td>
-                        <td className='td-op'>Eliminar</td>
-                        <td className='td-op'>Editar</td>           
-                        <td className='td-op'>Ver</td>
-                    </tr>
-                </thead>
-                <tbody>
-                {
-                        usuarios.map((res,idx)=>{
-                            return(
-                                <tr key={idx}>
-                                    <td>{res.nombre}</td>
-                                    <td>{res.correo}</td>
-                                    <td className='td-op'><button onClick={()=>delate(res.uid)} className='delate'>Eliminar</button></td>
-                                    <td className='td-op'><Link to={`./../actulizarusuarios/${res.uid}`} ><button className='edit'>Editar</button></Link></td>
-                                    <td className='td-op'><button className='ver'>Ver</button></td>
-                                </tr>
-                            )
-                        })
+                <table>
+                    <thead>
+                        <tr>
+                            <td>Nombre Usuario</td>
+                            <td>Correo Electronico</td>
+                            <td className='td-op'>Eliminar</td>
+                            <td className='td-op'>Editar</td>
+                            <td className='td-op'>Ver</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            usuarios.map((res, idx) => {
+                                return (
+                                    <tr key={idx}>
+                                        <td>{res.nombre}</td>
+                                        <td>{res.correo}</td>
+                                        <td className='td-op'><button onClick={() => delate(res.uid)} className='delate'>Eliminar</button></td>
+                                        <td className='td-op'><button className='edit'>Editar</button></td>
+                                        <td className='td-op'><button className='ver'>Ver</button></td>
+                                    </tr>
+                                )
+                            })
+                        }
+                    </tbody>
+                </table>
+                <div className='nav-foot'>
+                    {
+                        page.map((e, i) => <NavLink onClick={() => setOption(i)} key={i} className='nav-footN'> {e + 1} </NavLink>)
                     }
-                </tbody>
-            </table>
-        <div className='nav-foot'>
-                {
-                    page.map((e,i)=><NavLink onClick={()=>setOption(i)} key={i} className='nav-footN'> {e+1} </NavLink>)
-                }
-        </div>
-    </div>
+                </div>
+            </div>
         </>
     )
 }

client/src/abuelos/pages/Volunteers.jsx

@@ -1,7 +1,35 @@
-import React from 'react'
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
+import '../Styles/Volunteers.css'
 
 export const Volunteers = () => {
+    const [usuarios, setUsuarios] = useState([]);
+
+
+    useEffect(() => {
+
+        const GetData = async () => {
+            const res = await axios.get('http://localhost:8080/api/usuarios', {
+            })
+            setUsuarios(res.data.usuarios);
+
+        }
+        GetData();
+    }, [])
     return (
-        <div>Volunteers</div>
+        <>
+            <div className="detalles container">
+                {usuarios.map((res, idx) => {
+                    return (
+                        <div key={idx} className="card">
+                            <div className="card-body">
+                                <h5 className="card-title">{res.nombre}</h5>
+                                <p className="card-text">{res.correo}</p>
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </>
     )
 }