Refactor

src/components/MenteeList/index.tsx

@@ -1,37 +1,15 @@
-import React, { useState } from 'react';
-import UserIcon from '../../assets/svg/Icons/UserIcon';
+import React from 'react';
 import { Mentee } from '../../types';
-
-const MenteeProfilePic: React.FC<{ src: string; alt: string }> = ({
-  src,
-  alt,
-}) => {
-  const [isError, setIsError] = useState(false);
-
-  return isError || !src ? (
-    <div className="inline-block h-10 w-10 bg-gray-200 rounded-full ring-2 ring-white flex items-center justify-center">
-      <UserIcon />
-    </div>
-  ) : (
-    <img
-      src={src}
-      alt={alt}
-      className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
-      referrerPolicy="no-referrer"
-      onError={() => {
-        setIsError(true);
-      }}
-    />
-  );
-};
+import ProfilePic from '../ProfilePic';
 
 const MenteesList: React.FC<{ mentees: Mentee[] }> = ({ mentees }) => (
   <div className="flex flex-wrap gap-1">
     {mentees?.map((mentee, index) => (
       <div key={index} className="relative group">
-        <MenteeProfilePic
+        <ProfilePic
           src={mentee.application?.profilePic}
           alt={`${mentee.application.firstName} ${mentee.application.lastName}`}
+          size={'2.5rem'}
         />
         <div className="absolute bottom-12 left-1/2 transform -translate-x-1/2 whitespace-nowrap bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100">
           {`${mentee.application.firstName} ${mentee.application.lastName}`}

src/components/ProfilePic/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import UserIcon from '../../assets/svg/Icons/UserIcon';
+
+const ProfilePic: React.FC<{ src: string; alt: string; size: string }> = ({
+  src,
+  alt,
+  size,
+}) => {
+  const [isError, setIsError] = useState(false);
+
+  return isError || !src ? (
+    <div
+      style={{ height: size, width: size }}
+      className="inline-block bg-gray-200 rounded-full ring-2 ring-white flex items-center justify-center"
+    >
+      <UserIcon />
+    </div>
+  ) : (
+    <img
+      src={src}
+      alt={alt}
+      className="inline-block rounded-full ring-2 ring-white"
+      style={{ height: size, width: size }}
+      referrerPolicy="no-referrer"
+      onError={() => {
+        setIsError(true);
+      }}
+    />
+  );
+};
+
+export default ProfilePic;