58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import zdjecie from '../../../../assets/turtleProfileImg3.webp';
|
|
import logoutIcon from '../../../../assets/logout.svg';
|
|
import Cookies from 'js-cookie';
|
|
import { useOutletContext } from 'react-router-dom';
|
|
import { UsernameType } from '../../../utils/ProtectedRoutes.tsx';
|
|
|
|
function UserProfile() {
|
|
const user: UsernameType = useOutletContext();
|
|
|
|
function logout() {
|
|
Cookies.remove('token');
|
|
localStorage.removeItem('contact');
|
|
window.location.reload();
|
|
}
|
|
return (
|
|
<div className="dropdown dropdown-top border-t border-zinc-800">
|
|
<div
|
|
tabIndex={0}
|
|
className="flex items-center cursor-pointer"
|
|
role="button"
|
|
>
|
|
<div className="flex items-center justify-center m-3 w-10 h-10 overflow-hidden rounded-full bg-gray-100">
|
|
<img
|
|
src={zdjecie}
|
|
alt="Profile image"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="text-gray-200">
|
|
<p>{user.username}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ul
|
|
tabIndex={0}
|
|
className="m-2 dropdown-content menu p-2 shadow bg-gray-50 rounded-md w-52"
|
|
>
|
|
<li>
|
|
<a
|
|
className="flex items-center px-4 py-2 text-sm text-black hover:bg-gray-200"
|
|
onClick={logout}
|
|
>
|
|
<img
|
|
className="w-5 mr-2"
|
|
draggable={false}
|
|
src={logoutIcon}
|
|
alt="Log out icon"
|
|
/>
|
|
<p>Log out</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UserProfile;
|