ngerakines.me
this repo has no description
1/**
2 * Header Component
3 * Displays user information and navigation
4 */
5
6import React from 'react';
7import { Link, useNavigate } from 'react-router-dom';
8import { useAuth } from '../../contexts/AuthContext';
9
10export const Header: React.FC = () => {
11 const { user, isAuthenticated, logout } = useAuth();
12 const navigate = useNavigate();
13
14 const handleLogout = async () => {
15 await logout();
16 navigate('/login', { replace: true });
17 };
18
19 if (!isAuthenticated || !user) {
20 return null;
21 }
22
23 return (
24 <header className="bg-white shadow">
25 <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
26 <div className="flex justify-between h-16">
27 <div className="flex">
28 <div className="flex-shrink-0 flex items-center">
29 <Link to="/dashboard" className="text-xl font-bold text-gray-800">
30 ATProto Demo
31 </Link>
32 </div>
33 <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
34 <Link
35 to="/dashboard"
36 className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
37 >
38 Dashboard
39 </Link>
40 <Link
41 to="/create-post"
42 className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
43 >
44 Create Post
45 </Link>
46 </div>
47 </div>
48
49 <div className="flex items-center">
50 <div className="flex-shrink-0 flex items-center space-x-4">
51 <div className="flex items-center space-x-2">
52 {user.avatar && (
53 <img
54 className="h-8 w-8 rounded-full"
55 src={user.avatar}
56 alt={user.handle}
57 />
58 )}
59 <div className="hidden md:block">
60 <div className="text-sm font-medium text-gray-700">
61 {user.displayName || user.handle}
62 </div>
63 <div className="text-xs text-gray-500">@{user.handle}</div>
64 </div>
65 </div>
66
67 <button
68 onClick={handleLogout}
69 className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
70 title="Sign out"
71 >
72 <span className="sr-only">Sign out</span>
73 <svg
74 className="h-6 w-6"
75 xmlns="http://www.w3.org/2000/svg"
76 fill="none"
77 viewBox="0 0 24 24"
78 stroke="currentColor"
79 aria-hidden="true"
80 >
81 <path
82 strokeLinecap="round"
83 strokeLinejoin="round"
84 strokeWidth={2}
85 d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
86 />
87 </svg>
88 </button>
89 </div>
90 </div>
91 </div>
92
93 {/* Mobile menu */}
94 <div className="sm:hidden">
95 <div className="pt-2 pb-3 space-y-1">
96 <Link
97 to="/dashboard"
98 className="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
99 >
100 Dashboard
101 </Link>
102 <Link
103 to="/create-post"
104 className="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
105 >
106 Create Post
107 </Link>
108 </div>
109 </div>
110 </nav>
111 </header>
112 );
113};