// components/nav/Menu.js
<li>
<NavLink className="nav-link" to="/agents">
Agents
</NavLink>
</li>
// App.js
<Route path="/agents" element={<Agents />} />
// pages/Agents.js
import { useState, useEffect } from "react";
import axios from "axios";
import UserCard from "../components/cards/UserCard";
export default function Agents() {
const [agents, setAgents] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchAgents();
}, []);
const fetchAgents = async () => {
try {
const { data } = await axios.get("/agents");
setAgents(data);
setLoading(false);
} catch (err) {
console.log(err);
setLoading(false);
}
};
if (loading) {
return (
<div
className="d-flex justify-content-center align-items-center vh-100"
style={{ marginTop: "-7%" }}
>
<div className="display-1">Loading...</div>
</div>
);
}
return (
<div>
<h2 className="display-1 bg-primary text-light p-5 h1">Agents</h2>
<div className="container">
<div className="row">
{agents?.map((user) => (
<UserCard user={user} key={user._id} />
))}
</div>
</div>
</div>
);
}
// components/cards/UserCard.js
import { Badge } from "antd";
import { Link } from "react-router-dom";
import Logo from "../../logo.svg";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export default function UserCard({ user }) {
return (
<div className="col-lg-4 p-4 gx-4 gy-4">
<Link to={`/user/${user.username}`} className="nav-link">
<Badge.Ribbon text={`x listing`}>
<div className="card hoverable shadow">
<img
src={user?.photo?.Location ?? Logo}
alt={user.username}
style={{ height: "250px", objectFit: "cover" }}
/>
<div className="card-body">
<div className="d-flex justify-content-between">
<h3>{user?.username ?? user?.name}</h3>
</div>
<p className="card-text">
Joined {dayjs(user.createdAt).fromNow()}
</p>
</div>
</div>
</Badge.Ribbon>
</Link>
</div>
);
}