Skip to content

Fix: Show Officers and Adjusted Height and Width of cards #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
remagII merged 1 commit into from
Apr 1, 2026
Merged

Fix: Show Officers and Adjusted Height and Width of cards #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/sections/AboutUsMeetTheTeamSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function AboutUsMeetTheTeamSection() {
"UI/UX Head",
"Creatives Head",
"Public Relations Officer",
"Logistics Head",
],
[],
);
Expand Down Expand Up @@ -69,8 +70,6 @@ export default function AboutUsMeetTheTeamSection() {
return "col-span-2 xl:col-span-4"; // First row single item
case 1:
return "col-span-2 xl:col-span-4"; // Second row single item
case officers.length - 1:
return "col-span-2 xl:col-span-4"; // Last row single item
default:
return "col-span-1"; // All middle items take 1 column each
}
Expand Down
36 changes: 18 additions & 18 deletions src/components/sections/MembersMeetTheTeamSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,19 @@ export const MembersMeetTheTeamSection: React.FC<
const router = useRouter();
const [members, setMembers] = React.useState<RawMember[]>([]);

const officerRoles = [
"Director",
"Deputy Director",
"Secretary General",
"Treasurer",
"Auditor",
"External Affairs Head",
"Frontend Head",
"Backend Head",
"UI/UX Head",
"Creatives Head",
"Public Relations Officer",
];
// const officerRoles = [
// "Director",
// "Deputy Director",
// "Secretary General",
// "Treasurer",
// "Auditor",
// "External Affairs Head",
// "Frontend Head",
// "Backend Head",
// "UI/UX Head",
// "Creatives Head",
// "Public Relations Officer",
// ];

function extractMembers(res: unknown): RawMember[] {
if (
Expand Down Expand Up @@ -90,12 +90,12 @@ export const MembersMeetTheTeamSection: React.FC<
const membersArray: RawMember[] = extractMembers(res);

// ✅ Filter out officers
const filteredMembers = membersArray.filter(
(member) =>
!member.roles.some((r) => officerRoles.includes(r.roles.name)),
);
// const filteredMembers = membersArray.filter(
// (member) =>
// !member.roles.some((r) => officerRoles.includes(r.roles.name)),
// );

setMembers(filteredMembers);
setMembers(membersArray);
}

fetchData();
Expand Down
19 changes: 10 additions & 9 deletions src/components/ui/MemberCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const positionVariants = cva(
defaultVariants: {
positionColor: "frontend",
},
}
},
);

export interface MemberCardProps {
Expand All @@ -35,7 +35,7 @@ export function MemberCard({ member }: MemberCardProps) {

// ✅ Normalize roles to string[]
const roleNames = roles.map((r) =>
typeof r === "string" ? r : r.roles.name
typeof r === "string" ? r : r.roles.name,
);

const positions = roleNames.map((role) => ({
Expand Down Expand Up @@ -100,6 +100,7 @@ export function MemberCard({ member }: MemberCardProps) {
<span className="hidden sm:inline">Proj. Man.</span>
</span>
);

default:
return text;
}
Expand All @@ -112,7 +113,7 @@ export function MemberCard({ member }: MemberCardProps) {
<div className="w-full mb-1.5">
<div
className={`
${instrument_sans.className}
${instrument_sans.className}
${positionVariants({ positionColor: positions[0].color })}
`}
>
Expand All @@ -124,7 +125,7 @@ export function MemberCard({ member }: MemberCardProps) {
<div key={idx} className="flex-1">
<div
className={`
${instrument_sans.className}
${instrument_sans.className}
${positionVariants({ positionColor: pos.color })}
`}
>
Expand All @@ -144,7 +145,7 @@ export function MemberCard({ member }: MemberCardProps) {
return rows.map((row, rowIndex) => (
<div
key={rowIndex}
className={`w-full h-9 sm:h-14 flex items-end gap-x-2 ${
className={`w-full flex items-end gap-x-2 ${
rowIndex > 0 ? "mt-1" : ""
}`}
>
Expand All @@ -155,7 +156,7 @@ export function MemberCard({ member }: MemberCardProps) {
>
<div
className={`
${instrument_sans.className}
${instrument_sans.className}
${positionVariants({ positionColor: pos.color })}
`}
>
Expand Down Expand Up @@ -195,8 +196,8 @@ export function MemberCard({ member }: MemberCardProps) {
<div
className={`flex items-center rounded-3xl sm:rounded-2xl bg-blue3
flex-row sm:flex-col
max-w-9/10 sm:max-w-none w-64 sm:w-56
max-h-[135px] sm:max-h-96 h-fit
max-w-9/10 sm:max-w-none w-90 sm:w-86
max-h-[135px] sm:max-h-96
flex-shrink-0
py-5 px-4 sm:p-5`}
>
Expand All @@ -216,7 +217,7 @@ export function MemberCard({ member }: MemberCardProps) {
/>
</div>

<div className="flex flex-col w-full min-w-0 h-full gap-y-1 justify-center sm:justify-between">
<div className="flex flex-col w-full min-w-0 h-full gap-y-1 justify-start">
<div>
<div className="sm:mb-1 sm:flex sm:flex-col sm:justify-center sm:h-10">
<h3
Expand Down
7 changes: 4 additions & 3 deletions src/components/ui/OfficerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ export function OfficerCard({ member }: OfficerCardProps) {
"Backend Head",
"UI/UX Head",
"Creatives Head",
"Public Relations Officer"
"Public Relations Officer",
"Logistics Head",
];

// Map RawMember roles to string[] of role names
const roleNames = roles.map((r) =>
typeof r === "string" ? r : r.roles.name
typeof r === "string" ? r : r.roles.name,
);

// Find first officer role that matches this member
const primaryOfficerRole = roleNames.find((role) =>
officerRoles.includes(role)
officerRoles.includes(role),
);

// Helper for responsive role display
Expand Down
Loading