danabra.mov
forked from
samuel.fm/statusphere-react
the statusphere demo reworked into a vite/react app in a monorepo
samuel.fm
1import { Link } from 'react-router-dom'
2
3import { useAuth } from '#/hooks/useAuth'
4
5const Header = () => {
6 const { user, logout } = useAuth()
7
8 const handleLogout = async () => {
9 try {
10 await logout()
11 } catch (error) {
12 console.error('Logout failed:', error)
13 }
14 }
15
16 return (
17 <header className="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
18 <div className="flex justify-between items-center">
19 <h1 className="m-0 text-2xl font-bold">
20 <Link
21 to="/"
22 className="no-underline text-inherit hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
23 >
24 Statusphere
25 </Link>
26 </h1>
27 <nav>
28 {user ? (
29 <div className="flex gap-4 items-center">
30 {user.profile.avatar ? (
31 <img
32 src={user.profile.avatar}
33 alt={user.profile.displayName || user.profile.handle}
34 className="w-8 h-8 rounded-full text-transparent"
35 />
36 ) : (
37 <div className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
38 )}
39 <span className="text-gray-700 dark:text-gray-300">
40 {user.profile.displayName || user.profile.handle}
41 </span>
42 <button
43 onClick={handleLogout}
44 className="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-colors"
45 >
46 Logout
47 </button>
48 </div>
49 ) : (
50 <Link to="/login">
51 <button className="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md transition-colors">
52 Login
53 </button>
54 </Link>
55 )}
56 </nav>
57 </div>
58 </header>
59 )
60}
61
62export default Header