Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement scrollable profile card container with sticky pagination.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-19 10:49:07 +05:30
parent 00a7cc68d1
commit a5fb2fda46
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/(user)/user/profiles/page.tsx
View File

@@ -770,35 +770,37 @@ function ProfilesPageContent() {
</div> </div>
)} )}
{/* Profile Cards */} {/* Profile Cards - scrollable container */}
{!loading && !error && agents.length > 0 && ( {!loading && !error && agents.length > 0 && (
<div className="space-y-4"> <div className="max-h-[calc(100vh-280px)] overflow-y-auto scroll-smooth pr-1 scrollbar-thin">
{agents.map((profile) => ( <div className="space-y-4">
<ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} /> {agents.map((profile) => (
))} <ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} />
</div> ))}
)} </div>
{/* Pagination */} {/* Pagination */}
{!loading && !error && totalPages > 1 && ( {totalPages > 1 && (
<div className="flex justify-center items-center gap-2 mt-8 flex-wrap"> <div className="flex justify-center items-center gap-2 mt-6 pb-2 flex-wrap sticky bottom-0 bg-white/90 backdrop-blur-sm py-3 rounded-[10px]">
<button <button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors" className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
> >
Previous Previous
</button> </button>
<span className="px-4 py-2 font-serif text-[13px] text-[#00293d]"> <span className="px-4 py-2 font-serif text-[13px] text-[#00293d]">
Page {currentPage} of {totalPages} Page {currentPage} of {totalPages}
</span> </span>
<button <button
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors" className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
> >
Next Next
</button> </button>
</div>
)}
</div> </div>
)} )}
</div> </div>