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

refactor: optimize profile tag display and truncate location text across professional components

Browse Source
This commit is contained in:
pradeepkumar
2026-04-10 16:39:58 +05:30
parent 772a0cde3d
commit e5dfac0470
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ function ProfessionalCard({
const [imgError, setImgError] = useState(false);
const placeholder = '/assets/icons/user-placeholder-icon.svg';
const isPlaceholder = imageUrl === placeholder;
const INITIAL_TAG_COUNT = 4;
const INITIAL_TAG_COUNT = 3;
return (
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
@@ -91,14 +91,15 @@ function ProfessionalCard({
<p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
Location:
</p>
<div className="flex items-center gap-1.5 mt-1">
<div className="flex items-center gap-1.5 mt-1 min-w-0">
<Image
src="/assets/icons/location-pin-orange.svg"
alt="Location"
width={12}
height={15}
className="flex-shrink-0"
/>
<span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
<span className="font-serif font-normal text-[10px] leading-normal text-[#00293d] truncate" title={location}>
{location}
</span>
</div>
@@ -111,17 +112,17 @@ 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 items-center">
<div className="flex flex-nowrap overflow-hidden gap-1.5 mt-2 items-center">
{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]"
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] whitespace-nowrap flex-shrink-0"
>
{tag}
</span>
))}
{expertise.length > INITIAL_TAG_COUNT && (
<span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%]">
<span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%] whitespace-nowrap flex-shrink-0">
+{expertise.length - INITIAL_TAG_COUNT} more
</span>
)}