Update mentee and mentor card #170

src/assets/svg/BusinessBag.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const BusinessBag: React.FC = () => (
+  <svg
+    className="w-4 h-4 text-gray-500 dark:text-white mr-2"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+  >
+    <path d="M19.728 10.686c-2.38 2.256-6.153 3.381-9.875 3.381-3.722 0-7.4-1.126-9.571-3.371L0 10.437V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-7.6l-.272.286Z"></path>
+    <path d="m.135 7.847 1.542 1.417c3.6 3.712 12.747 3.7 16.635.01L19.605 7.9A.98.98 0 0 1 20 7.652V6a2 2 0 0 0-2-2h-3V3a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H2a2 2 0 0 0-2 2v1.765c.047.024.092.051.135.082ZM10 10.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5ZM7 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H7V3Z"></path>
+  </svg>
+);
+
+export default BusinessBag;

src/components/Layout/Navbar/index.tsx

@@ -121,7 +121,7 @@ const Navbar: React.FC = () => {
                 </a>
               </li>
               {!isUserMentor && (
-                <li className='items-center flex justify-center'>
+                <li className="items-center flex justify-center">
                   <button
                     type="button"
                     onClick={handleMentorRegistration}
@@ -180,8 +180,9 @@ const Navbar: React.FC = () => {
                 </button>
                 {/* Dropdown menu */}
                 <div
-                  className={`z-50 ${isDropdownOpen ? 'block' : 'hidden'
-                    } my-4 text-base list-none top-5 md:right-5 right-0 bg-white divide-y absolute divide-gray-100 rounded-lg shadow`}
+                  className={`z-50 ${
+                    isDropdownOpen ? 'block' : 'hidden'
+                  } my-4 text-base list-none top-5 md:right-5 right-0 bg-white divide-y absolute divide-gray-100 rounded-lg shadow`}
                 >
                   <div className="px-4 py-3">
                     <span className="block text-sm text-gray-900">

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<MenteeCardProps> = ({
 }) => {
   return (
     <Link
-      className="border border-gray-200 p-4 rounded-md shadow-sm w-52 flex flex-col h-full"
+      className="border-2 border-light-gray p-2.5 pb-[12px] rounded-md shadow-sm max-w-full flex flex-col h-full"
       to={
         showPublicProfile
           ? `/mentees/${mentee.uuid}`
           : `/mentor/my-mentees/${mentee.uuid}`
       }
     >
-      <div className="mx-auto mb-4">
+      <div className="mx-auto mb-2">
         <ProfilePic
           src={mentee.profile?.image_url}
           alt="Mentee Avatar"
-          size="6rem"
+          size="11.6875rem"
+          width="16.25rem"
+          circular={false}
         />
       </div>
-      <div className="text-center">
+      <div className="text-left p-0.5">
         <h5 className="text-lg font-bold">
           {mentee.application.firstName} {mentee.application.lastName}
         </h5>
         {mentee.application.isUndergrad ? (
-          <p className="text-xs text-gray-500">
-            {mentee.application.university}
+          <p className="text-sm text-gray-500 flex items-center">
+            <BusinessBag />
+            <span>{mentee.application.university}</span>
           </p>
         ) : (
           <>

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<MentorCardProps> = ({
     );
   }
 
+  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 (
     <Link
-      className="border border-gray-200 p-4 rounded-md shadow-md w-52 flex flex-col h-full relative"
+      className="p-2.5 rounded-md shadow-md max-w-full flex flex-col h-full relative outline outline-2 outline-bd-gray"
       to={`/mentors/${mentor.uuid}`}
     >
-      <div className="mx-auto mb-4">
+      <div className="flex flex-col items-center">
         <ProfilePic
-          src={mentor.profile.image_url}
+          src={mentor.profile?.image_url}
           alt="Mentee Avatar"
-          size="6rem"
+          size="11.6875rem"
+          width="17.5rem"
+          circular={false}
           availability={mentor.availability}
         />
       </div>
@@ -64,15 +80,40 @@ const MentorCard: React.FC<MentorCardProps> = ({
           <span className="text-xs font-semibold">Unavailable</span>
         </div>
       )}
-      <div className="text-center">
-        <h5 className="text-lg font-semibold text-slate-600 text-wrap">
-          {mentor.application.firstName} {mentor.application.lastName}
+      <div className="text-left p-0.5 flex-1">
+        <h5 className="text-lg font-bold text-black-600 text-wrap">
+          {mentor.application?.firstName} {mentor.application?.lastName}
         </h5>
-        <p className="text-sm">{mentor.application.position}</p>
-        <p className="text-xs text-gray-500">
-          {mentor.application.institution}
+        <p className="text-sm text-gray-500 flex items-center p-0">
+          <BusinessBag />
+          <span className="align-middle">
+            {mentor.application?.position} | {mentor.application?.institution}
+          </span>
         </p>
       </div>
+      <hr className="my-4 border-gray-300" />
+
+      <div className="flex justify-between text-left">
+        <div className="text-[10px]">
+          <p className="text-gray-500">Available Mentee Slots</p>
+          <p className="text-xs font-bold">
+            {mentor?.application?.noOfMentees && mentor.mentees
+              ? availableSlots
+              : 0}
+          </p>
+        </div>
+        <div className="text-[10px]">
+          <p className="text-gray-500">Applications Received</p>
+          <p className="text-xs font-bold">
+            {mentor?.mentees &&
+            mentor.mentees.some(
+              (mentee) => mentee.state === ApplicationStatus.APPROVED
+            )
+              ? totalApplications
+              : 0}
+          </p>
+        </div>
+      </div>
     </Link>
   );
 };

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,32 +21,38 @@ const ProfilePic: React.FC<{
     setIsLoading(false);
   };
 
+  const appliedWidth = width ?? size;
+
   return (
     <div
       className="relative inline-block"
-      style={{ height: size, width: size }}
+      style={{ height: size, width: appliedWidth }}
     >
       {isLoading && !isError && (
         <div
-          className="absolute inset-0 bg-gray-200 rounded-full animate-skeleton bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]"
-          style={{ height: size, width: size }}
+          className={`absolute inset-0 bg-gray-200 animate-skeleton bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          }`}
+          style={{ height: size, width: appliedWidth }}
         />
       )}
       {isError ? (
         <div
-          className="inline-block bg-gray-200 rounded-full ring-2 ring-white flex items-center justify-center"
-          style={{ height: size, width: size }}
+          className={`inline-block bg-gray-200 ring-2 ring-white flex items-center justify-center ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          }`}
+          style={{ height: size, width: appliedWidth }}
         >
           <UserIcon />
         </div>
       ) : (
         <img
           src={src}
           alt={alt}
-          className={`inline-block rounded-full ring-2 ring-white object-cover ${
-            !availability ? 'opacity-60' : ''
-          }`}
-          style={{ height: size, width: size }}
+          className={`inline-block ring-2 ring-white object-cover ${
+            circular ? 'rounded-full' : 'rounded-custom-5'
+          } ${!availability ? 'opacity-60' : ''} max-w-full`}
+          style={{ height: size, width: appliedWidth }}
           referrerPolicy="no-referrer"
           onLoad={handleImageLoad}
           onError={handleImageError}

src/pages/Mentors/index.tsx

@@ -106,7 +106,7 @@ const Mentors = () => {
         </div>
 
         {sortedMentors.length > 0 ? (
-          <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-8 items-start">
+          <div className="flex-grow grid grid-cols-[repeat(auto-fit,_minmax(16rem,_1fr))] gap-4 items-start">
             {sortedMentors.map((mentor) => (
               <MentorCard key={mentor.uuid} mentor={mentor} />
             ))}

tailwind.config.js

@@ -5,6 +5,7 @@ export const theme = {
     colors: {
       'primary-blue': '#1677FF',
       'darkmod-blue': '#3D317C',
+      'bd-gray': '#D1D5DB',
     },
     animation: {
       'skeleton': 'skeleton-loading 1.5s infinite',
@@ -15,6 +16,9 @@ export const theme = {
         '100%': { backgroundPosition: '-100% 0' },
       },
     },
+    borderRadius: {
+      'custom-5': '5px',
+    },
   },
 };
 export const plugins = [];