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

refactor: adjust profile page layout by removing scrollable profile cards and updating header navigation positioning.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-19 18:18:44 +05:30
parent 8a9f1f2325
commit b19991ed7b
3 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -610,8 +610,8 @@ function ProfilesPageContent() {
<div className="min-h-screen bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="flex gap-6">
{/* Left Sidebar - hidden on mobile */}
<div className="hidden lg:block w-[220px] flex-shrink-0">
{/* Left Sidebar - hidden on mobile, sticky */}
<div className="hidden lg:block w-[220px] flex-shrink-0 self-start sticky top-6 max-h-[calc(100vh-48px)] overflow-y-auto scrollbar-thin">
{/* Listing Type */}
<div className="mb-6">
<h2 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">Listing Type</h2>
@@ -772,18 +772,18 @@ function ProfilesPageContent() {
</div>
)}
{/* Profile Cards - scrollable container */}
{/* Profile Cards - nested scroll matching filter sidebar height */}
{!loading && !error && agents.length > 0 && (
<div className="max-h-[calc(100vh-280px)] overflow-y-auto scroll-smooth pr-1 scrollbar-thin">
<div className="space-y-4">
<div className="overflow-y-auto scroll-smooth scrollbar-thin" style={{ maxHeight: 'calc(100vh - 220px)' }}>
<div className="space-y-4 pb-4">
{agents.map((profile) => (
<ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} />
))}
</div>
{/* Pagination */}
{/* Pagination - sticky at bottom of scroll area */}
{totalPages > 1 && (
<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]">
<div className="flex justify-center items-center gap-2 py-3 flex-wrap sticky bottom-0 bg-white/95 backdrop-blur-sm">
<button
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}

18
src/components/home/TopProfessionals.tsx
View File

@@ -32,12 +32,14 @@ function ProfessionalCard({
}: ProfessionalCardProps) {
const starCount = rating ? Math.round(rating) : 0;
const [imgLoaded, setImgLoaded] = useState(false);
const [showAllTags, setShowAllTags] = useState(false);
const placeholder = '/assets/icons/user-placeholder-icon.svg';
const isPlaceholder = imageUrl === placeholder;
const INITIAL_TAG_COUNT = 4;
return (
<Link href={profileLink}>
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_rgba(0,0,0,0.12)] transition-shadow cursor-pointer">
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_rgba(0,0,0,0.12)] transition-shadow cursor-pointer h-full flex flex-col">
{/* Image */}
<div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
{!imgLoaded && !isPlaceholder && (
@@ -54,7 +56,7 @@ function ProfessionalCard({
</div>
{/* Content */}
<div className="p-4">
<div className="p-4 flex-1 flex flex-col">
{/* Name */}
<h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
{name}
@@ -106,8 +108,8 @@ function ProfessionalCard({
<p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
Expertise:
</p>
<div className="flex flex-wrap gap-1.5 mt-2">
{expertise.slice(0, 6).map((tag, index) => (
<div className="flex flex-wrap gap-1.5 mt-2 items-center">
{(showAllTags ? expertise : expertise.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => (
<span
key={index}
className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
@@ -115,6 +117,14 @@ function ProfessionalCard({
{tag}
</span>
))}
{expertise.length > INITIAL_TAG_COUNT && (
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); setShowAllTags(!showAllTags); }}
className="border-[0.7px] border-[#e58625] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#e58625] hover:bg-[#e58625]/10 transition-colors"
>
{showAllTags ? 'Show Less' : `+${expertise.length - INITIAL_TAG_COUNT} more`}
</button>
)}
</div>
</div>
)}

6
src/components/layout/CommonHeader.tsx
View File

@@ -57,7 +57,7 @@ export function CommonHeader() {
return (
<header className="bg-[#648188] rounded-[20px] px-4 md:px-8 relative" ref={mobileMenuRef}>
<div className="flex items-center h-[60px] md:h-[70px]">
<div className="flex justify-between items-center h-[60px] md:h-[70px]">
{/* Logo */}
<Link href={dashboardLink} className="flex-shrink-0">
<Image
@@ -70,8 +70,8 @@ export function CommonHeader() {
/>
</Link>
{/* Navigation - Desktop only (centered) */}
<nav className="hidden md:flex items-center gap-8 flex-1 justify-center">
{/* Navigation - Desktop only */}
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
{navLinks.map((link) => (
<Link
key={link.href}