User Details - Copy this React, Tailwind Component to your project
Create a beautiful user details section from the information given with this prompt, take some references but do not replicate them. please make it by your creativeness. ```import React, { useState } from "react"; import { UpdateRole, UserSearch } from "../../components/Admin"; import { useRelativeTime } from "../../hooks"; import { FaUserEdit } from "react icons/fa"; function Users() { const [user, setUser] = useState(null); const [isEditing, setIsEditing] = useState({ edit: false, element: null, }); const date = useRelativeTime(); return ( <div className="p 4"> <h1 className="text 2xl font bold mb 4">Users</h1> <div className="mb 4"> <UserSearch setUser={setUser} /> </div> {user && ( <div className="mb 4 p 4 border 2 border blue 500 rounded"> <h1 className="text xl font bold ">User Details</h1> <hr className="mb 2" /> <div className="flex"> <div className="w 3/4 grid grid cols 2 gap 2"> <div> <p className="text gray 200 text lg font bold"> Name </p> <p className="text slate 300">{user.name}</p> </div> <div> <p className="text gray 200 text lg font bold"> Username </p> <p className="text slate 300"> {user.username} </p> </div> <div> <p className="text gray 200 text lg font bold"> Email </p> <p className="text slate 300">{user.email}</p> </div> <div> <p className="text gray 200 text lg font bold"> Role </p> <p className="text slate 300 flex items center"> {isEditing.edit === true && isEditing.element === "role" ? ( <UpdateRole user={user} setUser={setUser} setIsEditing={setIsEditing} /> ) : ( <> {user.role} <span className="hover:text red 500 text xl cursor pointer" onClick={() => setIsEditing({ edit: true, element: "role", }) } > <FaUserEdit /> </span> </> )} </p> </div> <div> <p className="text gray 200 text lg font bold"> Joined at </p> <p className="text slate 300"> {new Date(user.createdAt).toDateString()} </p> </div> <div> <p className="text gray 200 text lg font bold"> Updated At </p> <p className="text slate 300"> {date(user.updatedAt)} </p> </div> <div> <p className="text gray 200 text lg font bold"> Labels </p> {user?.labels?.length > 0 ? ( user?.labels?.map((label, i) => ( <p key={i}>{label}</p> )) ) : ( <p>No labels</p> )} </div> </div> <div className="w 1/4 "> <div className="border 4 border gray 400 aspect square rounded full overflow hidden"> <img src={user.avatar} alt="" /> </div> </div> </div> </div> )} </div> ); } export default Users; ```
