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

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>
)}