Skip to content

Improve Module Card: Show mentors/mentee avatars & change grid to 3 columns #3296

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
kasya merged 12 commits into from
Jan 17, 2026
Merged

Improve Module Card: Show mentors/mentee avatars & change grid to 3 columns #3296

Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1c0506
feat: improve ModuleCard layout with split mentor/mentee sections
HarshitVerma109 Jan 11, 2026
ba91a24
update: improve module card layout
HarshitVerma109 Jan 11, 2026
8810feb
Update code with make check. Capitalize level on the card
kasya Jan 12, 2026
bdc7793
Merge branch 'main' into update/Improve-module-card-layout
kasya Jan 12, 2026
a62451d
Update avatar source for Mentors and Mentees
kasya Jan 12, 2026
f34e381
Merge branch 'update/Improve-module-card-layout' of github.com:Harshi…
kasya Jan 12, 2026
db1deb7
Fix module key fallback
kasya Jan 12, 2026
87c96c4
Add clickable links to mentor and mentee avatars in ModuleCard
HarshitVerma109 Jan 13, 2026
845b5b4
Add clickable links to mentor and mentee avatars in ModuleCard
HarshitVerma109 Jan 13, 2026
3137ca5
fix: inline variables and add mentees to SingleModuleCard
HarshitVerma109 Jan 16, 2026
b158ec3
Update module card text color
kasya Jan 17, 2026
9405c3b
Remove labels and update font-bold
kasya Jan 17, 2026
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
89 changes: 84 additions & 5 deletions frontend/src/components/ModuleCard.tsx
View file
Open in desktop
Comment thread
HarshitVerma109 marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import upperFirst from 'lodash/upperFirst'
import { capitalize } from 'lodash'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import type React from 'react'
Expand Down Expand Up @@ -36,7 +37,7 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {

return (
<div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
{displayedModule.map((module) => {
return <ModuleItem key={module.key || module.id} module={module} isAdmin={isAdmin} />
})}
Expand Down Expand Up @@ -67,21 +68,99 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {

const ModuleItem = ({ module, isAdmin }: { module: Module; isAdmin: boolean }) => {
const pathname = usePathname()

const mentors = module.mentors || []
const mentees = module.mentees || []

Comment thread
coderabbitai[bot] marked this conversation as resolved.
const mentorsWithAvatars = mentors.filter((m) => m?.avatarUrl)
const menteesWithAvatars = mentees.filter((m) => m?.avatarUrl)

const hasContributors = mentorsWithAvatars.length > 0 || menteesWithAvatars.length > 0

const getAvatarUrlWithSize = (avatarUrl: string): string => {
try {
const url = new URL(avatarUrl)
url.searchParams.set('s', '60')
return url.toString()
} catch {
const separator = avatarUrl.includes('?') ? '&' : '?'
return `${avatarUrl}${separator}s=60`
}
}

return (
<div className="flex h-46 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
<div className="flex h-auto min-h-[12rem] w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
Comment thread
HarshitVerma109 marked this conversation as resolved.
Outdated
<Link
href={`${pathname}/modules/${module.key}`}
href={`${pathname}/modules/${module.key || module.id}`}
className="text-start font-semibold text-blue-400 hover:underline"
>
<TruncatedText text={module?.name} />
</Link>
Comment thread
HarshitVerma109 marked this conversation as resolved.
<TextInfoItem icon={FaTurnUp} label="Level" value={upperFirst(module.experienceLevel)} />
<TextInfoItem icon={FaTurnUp} label="Level" value={capitalize(module.experienceLevel)} />
<TextInfoItem icon={FaCalendar} label="Start" value={formatDate(module.startedAt)} />
<TextInfoItem
icon={FaHourglassHalf}
label="Duration"
value={getSimpleDuration(module.startedAt, module.endedAt)}
/>

{hasContributors && (
<div className="mt-auto flex w-full gap-4">
{mentorsWithAvatars.length > 0 && (
<div className="flex flex-1 flex-col gap-2">
<span className="text-xs font-medium tracking-wider text-gray-400 uppercase">
Mentors
</span>
<div className="flex flex-wrap gap-1">
{mentorsWithAvatars.slice(0, 4).map((contributor) => (
<Image
key={contributor.login}
alt={contributor.name || contributor.login}
className="rounded-full border-1 border-gray-200 dark:border-gray-700"
height={24}
src={getAvatarUrlWithSize(contributor.avatarUrl)}
title={contributor.name || contributor.login}
width={24}
/>
))}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

@kasya kasya Jan 12, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@HarshitVerma109 can we add a link to a members page here on clicking the avatar?

@HarshitVerma109 HarshitVerma109 Jan 13, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @kasya, Should I add the members page link to both mentor and mentee avatars, or only to mentors?

{mentorsWithAvatars.length > 4 && (
<span className="self-center text-xs font-medium text-gray-400">
+{mentorsWithAvatars.length - 4}
</span>
)}
</div>
</div>
)}
{menteesWithAvatars.length > 0 && (
<div
className={`flex flex-1 flex-col gap-2 ${mentorsWithAvatars.length > 0 ? 'border-l-1 border-gray-100 pl-4 dark:border-gray-700' : ''}`}
>
<span className="text-xs font-medium tracking-wider text-gray-400 uppercase">
Mentees
</span>
<div className="flex flex-wrap gap-1">
{menteesWithAvatars.slice(0, 4).map((contributor) => (
<Image
key={contributor.login}
alt={contributor.name || contributor.login}
className="rounded-full border-1 border-gray-200 dark:border-gray-700"
height={24}
src={getAvatarUrlWithSize(contributor.avatarUrl)}
title={contributor.name || contributor.login}
width={24}
/>

@kasya kasya Jan 12, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here can we add a link to members/ page when we are on a public view /mentorship/... and to mentees/ page when we are on the private admin view /my/mentorship/.... ?

@HarshitVerma109 HarshitVerma109 Jan 13, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you mentioned the mentee part here, sorry for the above question

))}
{menteesWithAvatars.length > 4 && (
<span className="self-center text-xs font-medium text-gray-400">
+{menteesWithAvatars.length - 4}
</span>
)}
</div>
</div>
)}
</div>
)}

{isAdmin && module.labels && module.labels.length > 0 && (
<div className="mt-2">
<LabelList labels={module.labels} maxVisible={3} />
Expand Down