Changeset 484dc3f for frontend/src/Nav.tsx

Timestamp:

01/26/26 19:03:37 (6 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

d47e225

Parents:

3727852

Message:

add support for profile pictures

File:

• frontend/src/Nav.tsx (modified) (3 diffs)

frontend/src/Nav.tsx

@@ -1 +1 @@
 import { Link } from "react-router-dom";
-import axiosInstance from "./api/axiosInstance";
+import axiosInstance, { baseURL } from "./api/axiosInstance";
 import Logo from "./assets/logo-finkwave.png";
 import { useAuth } from "./context/authContext";
@@ -29 +29 @@
                                                         <div className="flex items-center space-x-3">
                                                                 <div className="flex items-center space-x-2 bg-slate-700 rounded-lg px-3 py-2">
-                                                                        <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
-                                                                                <span className="text-white text-sm font-semibold">
-                                                                                        {user.username.charAt(0).toUpperCase()}
-                                                                                </span>
-                                                                        </div>
+                                                                        {user.profilePhoto ? (
+                                                                                <img
+                                                                                        src={`${baseURL}/${user.profilePhoto}`}
+                                                                                        alt={`${user.username}'s profile`}
+                                                                                        className="w-8 h-8 rounded-full object-cover"
+                                                                                />
+                                                                        ) : (
+                                                                                <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+                                                                                        <span className="text-white text-sm font-semibold">
+                                                                                                {user.username.charAt(0).toUpperCase()}
+                                                                                        </span>
+                                                                                </div>
+                                                                        )}
+
                                                                         <div className="text-white">
                                                                                 <p className="text-sm font-medium">{user.username}</p>
@@ -42 +51 @@
                                                                 </div>
                                                                 <button
-                                                                        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
-                                                                                handleLogout(e)
-                                                                        }
+                                                                        onClick={handleLogout}
                                                                         className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm 
                                     font-medium transition-colors duration-200 flex items-center space-x-1 cursor-pointer"