Skip to content
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

Added Horizontal Mentor card #197

Closed
wants to merge 2 commits into from
Closed

Added Horizontal Mentor card #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1eaad61
Added Horizontal Mentor card
dilankavishka Sep 30, 2024
9260074
Update the file
dilankavishka Oct 17, 2024
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
29 changes: 4 additions & 25 deletions src/components/MenteeApplication/MenteeApplication.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import useMentee from '../../hooks/admin/useMentee';
import Toast from '../Toast';
import { ApplicationStatus } from '../../enums';
import ActionButtons from '../ActionButtons';
import MentorCardHorizontal from '../MentorCardHorizontal/MentorCardHorizontal.component';

const MenteeApplication: React.FC = () => {
const { menteeId } = useParams();
Expand Down Expand Up @@ -137,31 +138,9 @@ const MenteeApplication: React.FC = () => {
<div className="col-span-3">
<div className="mb-4">
<h3 className="text-base font-bold">Applied Mentor</h3>
{/* TODO: Make this a spearate component */}
<div className="rounded-xl border-2 mt-2 border-gray-100 bg-white flex items-start gap-4 p-4">
<img
src={mentee?.mentor.profile.image_url}
className="w-14 h-14 rounded-full object-cover"
alt=""
/>
<div>
<h3 className="font-medium sm:text-lg">
<a
href="#"
className="hover:underline"
target="_blank"
rel="noreferrer"
>
{mentee?.mentor.application.firstName}{' '}
{mentee?.mentor.application.lastName}
</a>
</h3>
<p className="line-clamp-2 text-sm text-gray-700">
{mentee?.mentor.application.position},{' '}
{mentee?.mentor.application.institution}
</p>
</div>
</div>
<MentorCardHorizontal
mentor={mentee?.mentor}>
</MentorCardHorizontal>
Comment on lines +141 to +143
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<MentorCardHorizontal
mentor={mentee?.mentor}>
</MentorCardHorizontal>
<MentorCard mentor={mentee?.mentor} />

</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/MenteeProfile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { useParams } from 'react-router-dom';

import { ApplicationStatus } from '../../enums';
import useMentee from '../../hooks/useMentee';
import { useMentees } from '../../hooks/useMentees';
Expand Down
41 changes: 41 additions & 0 deletions src/components/MentorCardHorizontal/MentorCardHorizontal.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { type Mentor } from '../../types.ts';
import ProfilePic from '../ProfilePic/index.tsx';

interface MentorCardProps {
mentor: Mentor|undefined;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
mentor: Mentor|undefined;
mentor?: Mentor;

}

const MentorCardHorizontal: React.FC<MentorCardProps> = ({ mentor }) => {
return (
<div className="rounded-xl border-2 mt-2 border-gray-100 bg-white flex items-start gap-4 p-4">
<div className="mx-auto mb-4">
<ProfilePic
src={mentor?.profile.image_url}
alt="Mentee Avatar"
size="6rem"
availability={mentor?.availability}
/>
</div>
<div>
<h3 className="font-medium sm:text-lg">
<a
href="#"
className="hover:underline"
target="_blank"
rel="noreferrer"
>
Comment on lines +22 to +27
Copy link
Member

Choose a reason for hiding this comment

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

Link to the mentor page

{mentor?.application.firstName}
{mentor?.application.lastName}
</a>
</h3>
<p className="line-clamp-2 text-sm text-gray-700">
{mentor?.application.position},
{mentor?.application.institution}
</p>
</div>
</div>
);
};

export default MentorCardHorizontal;
Loading