Move Sign Out button to profile page

- Remove Sign Out button from UserProfile component in header
- Add Sign Out button to UserProfilePage next to Edit Profile
- Sign Out button only visible on user's own profile page
- Styled with red background to indicate destructive action
This commit is contained in:
2025-11-16 23:01:36 +00:00
parent 0212e67052
commit 1e1e54e7ff
2 changed files with 40 additions and 41 deletions

View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { useClerk } from '@clerk/clerk-react';
import { userService, type UserProfile, type UserActivity } from '@/services/userService';
import type { Report, CleanupEvent } from '@/types';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
@@ -23,6 +24,7 @@ L.Icon.Default.mergeOptions({
export function UserProfilePage() {
const { userId } = useParams<{ userId: string }>();
const { user: currentUser } = useAuth();
const { signOut } = useClerk();
const navigate = useNavigate();
const [profile, setProfile] = useState<UserProfile | null>(null);
@@ -264,12 +266,23 @@ export function UserProfilePage() {
</button>
</>
) : (
<button
onClick={handleEditProfile}
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
>
Edit Profile
</button>
<>
<button
onClick={handleEditProfile}
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
>
Edit Profile
</button>
<button
onClick={async () => {
await signOut();
navigate('/');
}}
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
>
Sign Out
</button>
</>
)}
</div>
)}