diff --git a/index.html b/index.html index 5b005c51..63ae9c9b 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@ /> ScholarX | Sustainable Education Foundation +
diff --git a/src/assets/svg/BusinessBag.tsx b/src/assets/svg/BusinessBag.tsx new file mode 100644 index 00000000..6e4b6bf6 --- /dev/null +++ b/src/assets/svg/BusinessBag.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const BusinessBag: React.FC = () => ( + +); + +export default BusinessBag; diff --git a/src/components/MenteeCard/index.tsx b/src/components/MenteeCard/index.tsx index 37b29776..bf799569 100644 --- a/src/components/MenteeCard/index.tsx +++ b/src/components/MenteeCard/index.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import { Mentee } from '../../types.ts'; import ProfilePic from '../ProfilePic/index.tsx'; +import BusinessBag from '../../assets/svg/BusinessBag.tsx'; interface MenteeCardProps { mentee: Mentee; @@ -15,27 +16,30 @@ const MenteeCard: React.FC = ({ }) => { return ( -
+
-
+
{mentee.application.firstName} {mentee.application.lastName}
{mentee.application.isUndergrad ? ( -

- {mentee.application.university} +

+ + {mentee.application.university}

) : ( <> diff --git a/src/components/MentorCard/MentorCard.component.tsx b/src/components/MentorCard/MentorCard.component.tsx index f836e544..168c8dd6 100644 --- a/src/components/MentorCard/MentorCard.component.tsx +++ b/src/components/MentorCard/MentorCard.component.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { type Mentor } from '../../types.ts'; import { Link } from 'react-router-dom'; import ProfilePic from '../ProfilePic/index.tsx'; +import { ApplicationStatus } from '../../enums'; +import BusinessBag from '../../assets/svg/BusinessBag.tsx'; interface MentorCardProps { mentor: Mentor; @@ -46,16 +48,30 @@ const MentorCard: React.FC = ({ ); } + const approvedMenteesCount = mentor?.mentees + ? mentor.mentees.filter( + (mentee) => mentee.state === ApplicationStatus.APPROVED + ).length + : 0; + + const availableSlots = mentor?.application?.noOfMentees + ? Math.max(0, mentor.application.noOfMentees - approvedMenteesCount) + : 0; + + const totalApplications = mentor?.mentees?.length ?? 0; + return ( -
+
@@ -64,15 +80,42 @@ const MentorCard: React.FC = ({ Unavailable
)} -
-
- {mentor.application.firstName} {mentor.application.lastName} +
+
+ {mentor.application?.firstName} {mentor.application?.lastName}
-

{mentor.application.position}

-

- {mentor.application.institution} +

+ + + + + {mentor.application?.position} | {mentor.application?.institution} +

+
+ +
+
+

Available Mentee Slots

+

+ {mentor?.application?.noOfMentees && mentor.mentees + ? availableSlots + : 0} +

+
+
+

Applications Received

+

+ {mentor?.mentees && + mentor.mentees.some( + (mentee) => mentee.state === ApplicationStatus.APPROVED + ) + ? totalApplications + : 0} +

+
+
); }; diff --git a/src/components/ProfilePic/index.tsx b/src/components/ProfilePic/index.tsx index a649a6ea..df00896e 100644 --- a/src/components/ProfilePic/index.tsx +++ b/src/components/ProfilePic/index.tsx @@ -5,8 +5,10 @@ const ProfilePic: React.FC<{ src: string | undefined; alt: string; size: string; + width?: string; availability?: boolean; -}> = ({ src, alt, size, availability = true }) => { + circular?: boolean; +}> = ({ src, alt, size, width, availability = true, circular = true }) => { const [isLoading, setIsLoading] = useState(true); const [isError, setIsError] = useState(false); @@ -19,21 +21,27 @@ const ProfilePic: React.FC<{ setIsLoading(false); }; + const appliedWidth = width ?? size; + return (
{isLoading && !isError && (
)} {isError ? (
@@ -41,10 +49,10 @@ const ProfilePic: React.FC<{ {alt} {
{sortedMentors.length > 0 ? ( -
+
{sortedMentors.map((mentor) => ( ))} diff --git a/tailwind.config.js b/tailwind.config.js index 9b35b1aa..0556fe14 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,16 +5,23 @@ export const theme = { colors: { 'primary-blue': '#1677FF', 'darkmod-blue': '#3D317C', + 'bd-gray': '#D1D5DB', }, animation: { 'skeleton': 'skeleton-loading 1.5s infinite', }, + fontFamily: { + 'sf-pro': ['"SF Pro Text"', 'sans-serif'], + }, keyframes: { 'skeleton-loading': { '0%': { backgroundPosition: '100% 0' }, '100%': { backgroundPosition: '-100% 0' }, }, }, + borderRadius: { + 'custom-5': '5px', + }, }, }; export const plugins = [];