[IMP] used profile component in profile container

src/components/profile-picture/ProfilePicture.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-type sizesType = "small" | "medium" | "large";
+type sizesType = "small" | "medium" | "large" | "x-large";
 
 const DEFAULT_PROFILE_IMAGE = `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRony1PUEAFW_rKWuriSeChlMZK05SNCoyhblOQpH5tBq1m5C_HHsKEJvveSdHRdSj_zJ4&usqp=CAU`;
 
@@ -33,6 +33,8 @@ const ProfilePicture = ({
         return "w-14 h-14";
       case "large":
         return "w-16 h-16";
+      case "x-large":
+        return "w-24 h-24";
     }
   };
 

src/features/profile/ProfileContainer.tsx

@@ -2,7 +2,13 @@ import { useEffect, useRef, useState } from "react";
 import { AiOutlineArrowLeft, AiOutlineCamera } from "react-icons/ai";
 import { HiOutlineLocationMarker, HiOutlineMail } from "react-icons/hi";
 import { useAppDispatch, useAppSelector, useUploadImage } from "hooks";
-import { Modal, TwTooltip, TwButton, LoadingSpinner } from "components";
+import {
+  Modal,
+  TwTooltip,
+  TwButton,
+  LoadingSpinner,
+  ProfilePicture,
+} from "components";
 import { createToast } from "toastSlice";
 import { editProfile, getUserState } from "features/authentication/userSlice";
 import { changeSideContent, getSideContent } from "reducers/sideContentReducer";
@@ -82,10 +88,10 @@ const ProfileContainer = () => {
 
         <section className="flex flex-col items-center text-center p-4 px-8">
           <div className="group mb-2 relative flex items-center justify-center rounded-[50%] overflow-hidden">
-            <img
-              className="object-cover rounded-[50%] bg-white w-24 h-24 "
-              alt={`${user?.displayName}'s profile picture`}
-              src={user?.photoURL || ""}
+            <ProfilePicture
+              photoURL={user?.photoURL || ""}
+              isOnline={false}
+              size={"x-large"}
             />
             {isImgPending && (
               <LoadingSpinner