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

feat: Add cache-busting to avatar image URLs and implement show more/less functionality for certifications.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-09 01:42:26 +05:30
parent dbdd22a84b
commit 7e8576c006
4 changed files with 73 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/profile/ExperienceSection.tsx
View File

@@ -17,14 +17,17 @@ interface ExperienceSectionProps {
const INITIAL_DISPLAY_COUNT = 6;
const EXPERTISE_INITIAL_COUNT = 4;
const CERTIFICATIONS_INITIAL_COUNT = 2;
export function ExperienceSection({ experience }: ExperienceSectionProps) {
const [showAllLicensing, setShowAllLicensing] = useState(false);
const [showAllExpertise, setShowAllExpertise] = useState(false);
const [showAllCertifications, setShowAllCertifications] = useState(false);
// Calculate how many more items are hidden
const licensingRemaining = experience.licensingAreas.length - INITIAL_DISPLAY_COUNT;
const expertiseRemaining = experience.expertiseYears.length - EXPERTISE_INITIAL_COUNT;
const certificationsRemaining = experience.certifications.length - CERTIFICATIONS_INITIAL_COUNT;
// Get displayed items
const displayedLicensing = showAllLicensing
@@ -33,6 +36,9 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
const displayedExpertise = showAllExpertise
? experience.expertiseYears
: experience.expertiseYears.slice(0, EXPERTISE_INITIAL_COUNT);
const displayedCertifications = showAllCertifications
? experience.certifications
: experience.certifications.slice(0, CERTIFICATIONS_INITIAL_COUNT);
return (
<div className="bg-white rounded-[20px] p-4 lg:p-5">
@@ -133,16 +139,34 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
{experience.certifications.length > 0 ? (
<ul className="space-y-3">
{experience.certifications.map((cert, idx) => (
<li key={idx}>
<span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">{cert.name}</span>
{cert.org && (
<p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
)}
</li>
))}
</ul>
<div>
<ul className="space-y-3">
{displayedCertifications.map((cert, idx) => (
<li key={idx}>
<span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">{cert.name}</span>
{cert.org && (
<p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
)}
</li>
))}
</ul>
{!showAllCertifications && certificationsRemaining > 0 && (
<button
onClick={() => setShowAllCertifications(true)}
className="mt-3 inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
>
+{certificationsRemaining} More
</button>
)}
{showAllCertifications && experience.certifications.length > CERTIFICATIONS_INITIAL_COUNT && (
<button
onClick={() => setShowAllCertifications(false)}
className="mt-3 inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer hover:bg-gray-50 transition-colors"
>
Show Less
</button>
)}
</div>
) : (
<span className="text-[14px] font-serif text-[#00293D]/40">No certifications added</span>
)}