const DeveloperPage = ({ users, pages }: Props) => {
return (
<div className="mx-auto px-3 md:px-5 pt-20 pb-11 max-w-screen-xl flex flex-col gap-10">
{/* SEARCH BAR */}
<SearchBar />
{/* USERS */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-8 headline-color">
{users.map((user) => (
<UserComponent key={user.id} user={user} randomNumber={Math.floor(Math.random() * (100 - 3) + 3)} /> //HYDRATION ERROR FROM THE RANDOM NUMBER
))}
</div>
<div className="text-white flex items-center justify-center">
{Array.from(Array(pages).keys()).map((page) => (
<Link href={`/udviklere?page=${page + 1}`} key={page}>
{page + 1}
</Link>
))}
</div>
</div>
)
};
const DeveloperPage = ({ users, pages }: Props) => {
return (
<div className="mx-auto px-3 md:px-5 pt-20 pb-11 max-w-screen-xl flex flex-col gap-10">
{/* SEARCH BAR */}
<SearchBar />
{/* USERS */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-8 headline-color">
{users.map((user) => (
<UserComponent key={user.id} user={user} randomNumber={Math.floor(Math.random() * (100 - 3) + 3)} /> //HYDRATION ERROR FROM THE RANDOM NUMBER
))}
</div>
<div className="text-white flex items-center justify-center">
{Array.from(Array(pages).keys()).map((page) => (
<Link href={`/udviklere?page=${page + 1}`} key={page}>
{page + 1}
</Link>
))}
</div>
</div>
)
};