Add default picture for user icon

ChangePlusPlusVandy · Feb 9, 2024 · 3f041b7 · 3f041b7
1 parent fd8ff6c
commit 3f041b7
Showing 1 changed file with 39 additions and 3 deletions.
diff --git a/components/DesktopSidebar/UserIcon.tsx b/components/DesktopSidebar/UserIcon.tsx
@@ -17,9 +17,45 @@ export const UserIcon = () => {
   return (
     <UserIconContainer>
       <ImageContainer>
-        {/* TODO: add user profile image */}
         {/* Bigger image size for desktop and smaller for mobile */}
-        <Media greaterThanOrEqual="sm">
+        {session?.user && (
+          <>
+            <Media greaterThanOrEqual="sm">
+              {/* User Profile Picture */}
+              {session.user.profileImgUrl && (
+                <Image
+                  src={session.user.profileImgUrl}
+                  width="100"
+                  height="100"
+                  alt="user-profile"
+                />
+              )}
+
+              {/* Default Profile Picture */}
+              {!session.user.profileImgUrl && (
+                <Image src="/bookem-logo.png" width="100" height="100" alt="" />
+              )}
+            </Media>
+
+            <Media lessThan="sm">
+              {/* User Profile Picture */}
+              {session.user.profileImgUrl && (
+                <Image
+                  src={session.user.profileImgUrl}
+                  width="73"
+                  height="73"
+                  alt="user-profile"
+                />
+              )}
+
+              {/* Default Profile Picture */}
+              {!session.user.profileImgUrl && (
+                <Image src="/bookem-logo.png" width="73" height="73" alt="" />
+              )}
+            </Media>
+          </>
+        )}
+        {/* <Media greaterThanOrEqual="sm">
           {session?.user && session.user.profileImgUrl && (
             <Image
               src={session.user.profileImgUrl}
@@ -31,7 +67,7 @@ export const UserIcon = () => {
         </Media>
         <Media lessThan="sm">
           <Image src="/bookem-logo.png" width="73" height="73" alt="" />
-        </Media>
+        </Media> */}
       </ImageContainer>
       <Name>{session?.user && session.user.name}</Name>
     </UserIconContainer>