Users List Page - Copy this React, Tailwind Component to your project

Import { useEffect, useState, useRef } from 'react'; import { FaTrash, FaEye } from "react icons/fa"; import { userLIstREQUEST } from '../API/users.api'; function UsersListPage() { const [userList, setUsers] = useState([]); const [see, setSee] = useState(false); const [userId, setUserId] = useState(null); const [userName, setUserName] = useState(""); const [surname, setSurname] = useState(""); const [document, setDocument] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [address, setAddress] = useState(""); const modalRef = useRef(null); useEffect(() => { const getUsers = async () => { try { const response = await userLIstREQUEST(); if (Array.isArray(response.data)) { setUsers(response.data); } } catch (error) { console.error("Error obteniendo usuarios:", error); } }; getUsers(); const interval = setInterval(getUsers, 10000); return () => clearInterval(interval); }, []); const seeUser = (val) => { setSee(true); setUserId(val.id); setUserName(val.name); setSurname(val.surname); setDocument(val.document); setEmail(val.email); setPhone(val.phone); setAddress(val.address); }; const handleClickOutside = (event) => { if (modalRef.current && !modalRef.current.contains(event.target)) { setSee(false); } }; return ( <div className="min vh 100 d flex align items center justify content center bg ligth text white py 4 " > <div className="container"> <div className="row justify content center"> <div className="col 12 col xl 10"> <div className="card bg secondary shadow lg text white"> <div className="card header bg dark text warning py 3"> <h5 className="card title mb 0">Lista de Usuarios</h5> </div> <div className="card body"> <div className="table responsive"> <table className="table table dark table hover table bordered align middle"> <thead className="bg black text warning"> <tr> <th className="text center">#</th> <th>Nombre</th> <th>Apellido</th> <th>Documento</th> <th className="text end">Acciones</th> </tr> </thead> <tbody> {userList.length > 0 ? ( userList.map((values, index) => ( <tr key={values.id}> <td className="text center">{index + 1}</td> <td>{values.name}</td> <td>{values.surname}</td> <td>{values.document}</td> <td className="text end"> <div className="d flex justify content end gap 2"> <button className="btn btn warning btn sm text black" onClick={() => seeUser(values)}> <FaEye /> Ver </button> <button className="btn btn danger btn sm"> <FaTrash /> Eliminar </button> </div> </td> </tr> )) ) : ( <tr> <td colSpan="5" className="text center py 3 text warning"> No hay usuarios disponibles </td> </tr> )} </tbody> </table> </div> </div> </div> </div> </div> </div> {see && ( <div className="modal show d block bg dark bg opacity 75" onClick={handleClickOutside}> <div className="modal dialog modal dialog centered"> <div className="modal content bg secondary text white" ref={modalRef}> <div className="modal header bg dark text warning"> <h5 className="modal title">Detalles del Usuario</h5> <button type="button" className="btn close btn close white" onClick={() => setSee(false)}></button> </div> <div className="modal body"> {[{ label: 'Nombre', value: userName }, { label: 'Apellido', value: surname }, { label: 'Documento', value: document }, { label: 'Email', value: email }, { label: 'Teléfono', value: phone }, { label: 'Dirección', value: address }].map(({ label, value }) => ( <div key={label} className="mb 3"> <div className="row align items center"> <div className="col sm 4"> <label className="text warning fw bold">{label}:</label> </div> <div className="col sm 8"> <p className="mb 0">{value}</p> </div> </div> </div> ))} </div> <div className="modal footer"> <button type="button" className="btn btn warning text black" onClick={() => setSee(false)}> Cerrar </button> </div> </div> </div> </div> )} </div> ); } export default UsersListPage;