Ignore:
Timestamp:
02/21/26 19:19:51 (5 months ago)
Author:
Filip Gavrilovski <filipgavrilovski28@…>
Branches:
main
Parents:
765e166
Message:

add cursor pointer to buttons

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/userProfile/UserListModal.tsx

    r765e166 r947fcaa  
     1import { useEffect } from "react";
    12import { useNavigate } from "react-router-dom";
    23import { baseURL } from "../../api/axiosInstance";
     4import { useAuth } from "../../context/authContext";
    35import type { BaseNonAdminUser } from "../../utils/types";
    4 import { useEffect } from "react";
    5 import { useAuth } from "../../context/authContext";
    66
    77interface ModalProps {
    8   title: string;
    9   users: BaseNonAdminUser[];
    10   onClose: () => void;
    11   onFollowToggle: (targetUsername: string) => Promise<void>;
     8        title: string;
     9        users: BaseNonAdminUser[];
     10        onClose: () => void;
     11        onFollowToggle: (targetUsername: string) => Promise<void>;
    1212}
    1313
    1414const UserListModal = ({
    15   title,
    16   users,
    17   onClose,
    18   onFollowToggle,
     15        title,
     16        users,
     17        onClose,
     18        onFollowToggle,
    1919}: ModalProps) => {
    20   const navigate = useNavigate();
    21   const { user } = useAuth();
    22   useEffect(() => {
    23     document.body.style.overflow = "hidden";
    24     return () => {
    25       document.body.style.overflow = "";
    26     };
    27   }, []);
     20        const navigate = useNavigate();
     21        const { user } = useAuth();
     22        useEffect(() => {
     23                document.body.style.overflow = "hidden";
     24                return () => {
     25                        document.body.style.overflow = "";
     26                };
     27        }, []);
    2828
    29   return (
    30     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    31       <div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
    32         <div className="p-4 border-b border-white/10 flex justify-between items-center">
    33           <h2 className="text-xl font-bold text-white">{title}</h2>
    34           <button
    35             onClick={onClose}
    36             className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
    37           >
    38             &times;
    39           </button>
    40         </div>
     29        return (
     30                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
     31                        <div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
     32                                <div className="p-4 border-b border-white/10 flex justify-between items-center">
     33                                        <h2 className="text-xl font-bold text-white">{title}</h2>
     34                                        <button
     35                                                onClick={onClose}
     36                                                className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
     37                                        >
     38                                                &times;
     39                                        </button>
     40                                </div>
    4141
    42         <div className="overflow-y-auto p-4 flex-1">
    43           {users.length === 0 ? (
    44             <p className="text-center text-gray-500 py-8">No users found.</p>
    45           ) : (
    46             users.map((u) => (
    47               <div
    48                 key={u.username}
    49                 className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
    50               >
    51                 <div
    52                   className="flex items-center gap-4 cursor-pointer flex-1"
    53                   onClick={() => {
    54                     onClose();
    55                     navigate(`/users/${u.username}`);
    56                   }}
    57                 >
    58                   <div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
    59                     {u.profilePhoto ? (
    60                       <img
    61                         src={`${baseURL}/${u.profilePhoto}`}
    62                         className="w-full h-full object-cover"
    63                         alt=""
    64                       />
    65                     ) : (
    66                       <span className="text-[#1db954] font-bold">
    67                         {u.fullName.charAt(0)}
    68                       </span>
    69                     )}
    70                   </div>
    71                   <div>
    72                     <p className="font-semibold text-white">{u.fullName}</p>
    73                     <p className="text-sm text-gray-400">@{u.username}</p>
    74                   </div>
    75                 </div>
    76                 {user && (
    77                   <button
    78                     onClick={() => onFollowToggle(u.username)}
    79                     className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
    80                       u.isFollowedByCurrentUser
    81                         ? "bg-white/10 text-white hover:bg-white/20"
    82                         : "bg-[#1db954] text-black hover:bg-[#1ed760]"
    83                     }`}
    84                   >
    85                     {u.isFollowedByCurrentUser ? "Following" : "Follow"}
    86                   </button>
    87                 )}
    88               </div>
    89             ))
    90           )}
    91         </div>
    92       </div>
    93       <div className="absolute inset-0 -z-10" onClick={onClose}></div>
    94     </div>
    95   );
     42                                <div className="overflow-y-auto p-4 flex-1">
     43                                        {users.length === 0 ? (
     44                                                <p className="text-center text-gray-500 py-8">No users found.</p>
     45                                        ) : (
     46                                                users.map((u) => (
     47                                                        <div
     48                                                                key={u.username}
     49                                                                className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
     50                                                        >
     51                                                                <div
     52                                                                        className="flex items-center gap-4 cursor-pointer flex-1"
     53                                                                        onClick={() => {
     54                                                                                onClose();
     55                                                                                navigate(`/users/${u.username}`);
     56                                                                        }}
     57                                                                >
     58                                                                        <div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
     59                                                                                {u.profilePhoto ? (
     60                                                                                        <img
     61                                                                                                src={`${baseURL}/${u.profilePhoto}`}
     62                                                                                                className="w-full h-full object-cover"
     63                                                                                                alt=""
     64                                                                                        />
     65                                                                                ) : (
     66                                                                                        <span className="text-[#1db954] font-bold">
     67                                                                                                {u.fullName.charAt(0)}
     68                                                                                        </span>
     69                                                                                )}
     70                                                                        </div>
     71                                                                        <div>
     72                                                                                <p className="font-semibold text-white">{u.fullName}</p>
     73                                                                                <p className="text-sm text-gray-400">@{u.username}</p>
     74                                                                        </div>
     75                                                                </div>
     76                                                                {user && user.username !== u.username && (
     77                                                                        <button
     78                                                                                onClick={() => onFollowToggle(u.username)}
     79                                                                                className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
     80                                                                                        u.isFollowedByCurrentUser
     81                                                                                                ? "bg-white/10 text-white hover:bg-white/20"
     82                                                                                                : "bg-[#1db954] text-black hover:bg-[#1ed760]"
     83                                                                                }`}
     84                                                                        >
     85                                                                                {u.isFollowedByCurrentUser ? "Following" : "Follow"}
     86                                                                        </button>
     87                                                                )}
     88                                                        </div>
     89                                                ))
     90                                        )}
     91                                </div>
     92                        </div>
     93                        <div className="absolute inset-0 -z-10" onClick={onClose}></div>
     94                </div>
     95        );
    9696};
    9797
Note: See TracChangeset for help on using the changeset viewer.