use custom pfp otherwise use MUI generated pfp

SCCapstone · Jan 19, 2024 · ccae365 · ccae365
1 parent e759cdb
commit ccae365
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/FU.SPA/src/components/Navbar.jsx b/FU.SPA/src/components/Navbar.jsx
@@ -10,10 +10,15 @@ export default function Navbar() {
 
   const renderTabContent = () => {
     if (user) {
+      // if user has a custom pfp then use that, if not then use MUI instead of default pfp
+      const defaultPFP = user.pfpUrl.includes('https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png');
+      const pfpComponent = !defaultPFP
+      ? <Avatar src={user.pfpUrl} sx={{ width: 33, height: 33 }} />
+      : <Avatar {...stringAvatar(user.username)} sx={{ width: 33, height: 33, bgcolor: stringToColor(user.username) }} />;
       return (
         <>
         <li style={{ display: 'flex', alignItems: 'center' }}>
-            <Avatar {...stringAvatar(user.username)} sx={{ width: 33, height: 33, bgcolor: stringToColor(user.username) }}/>
+        {pfpComponent}
         </li>
         <li style={{ display: 'flex', alignItems: 'center' }}>
           <button onClick={logout}>Logout</button>