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

feat: Implement expandable specialization cards with an overlay, update specialization section grid item alignment, and reposition common header navigation.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-27 10:35:14 +05:30
parent 2fb4809d1d
commit 881c96580e
3 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,8 +70,8 @@ export function CommonHeader() {
/>
</Link>
{/* Navigation - Desktop only (centered absolutely) */}
<nav className="hidden md:flex items-center gap-8 absolute left-1/2 -translate-x-1/2">
{/* Navigation - Desktop only */}
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
{navLinks.map((link) => (
<Link
key={link.href}

33
src/components/profile/SpecializationCard.tsx
View File

@@ -29,11 +29,11 @@ export function SpecializationCard({
};
return (
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] min-h-[200px]">
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] relative">
<div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1">
{displayedItems.map((item, idx) => (
{items.slice(0, initialItemsToShow).map((item, idx) => (
<p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
{item}
</p>
@@ -56,6 +56,35 @@ export function SpecializationCard({
</button>
</div>
)}
{/* Expanded overlay showing all items */}
{isExpanded && hasMoreItems && (
<div className="absolute inset-0 bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] z-10 shadow-lg">
<div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1 overflow-y-auto">
{items.map((item, idx) => (
<p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
{item}
</p>
))}
</div>
<div className="mt-4 flex justify-center">
<button
onClick={handleToggle}
className="inline-flex items-center justify-center gap-1 h-[20px] px-3 border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors cursor-pointer"
>
Show Less
<Image
src="/assets/icons/chevron-down-icon.svg"
alt="Show less"
width={10}
height={10}
className="transition-transform duration-200 rotate-180"
/>
</button>
</div>
</div>
)}
</div>
);
}

4
src/components/profile/SpecializationSection.tsx
View File

@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Top row - up to 3 cards */}
{topRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${
topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Bottom row - remaining cards */}
{bottomRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-start gap-6 ${
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${
bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3'