73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/lib/auth';
|
|
|
|
export default function Header() {
|
|
const { user, signOut } = useAuth();
|
|
|
|
const handleLogout = async () => {
|
|
await signOut();
|
|
};
|
|
|
|
return (
|
|
<header className="w-full py-4 border-b border-gray-200 bg-white">
|
|
<div className="container flex items-center justify-between px-4 mx-auto">
|
|
<div className="flex items-center space-x-4">
|
|
<Link href="/analytics" className="flex items-center space-x-2">
|
|
<svg
|
|
className="w-6 h-6 text-blue-500"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
</svg>
|
|
<span className="text-xl font-bold text-gray-900">ShortURL Analytics</span>
|
|
</Link>
|
|
|
|
{user && (
|
|
<nav className="ml-6">
|
|
<ul className="flex space-x-4">
|
|
<li>
|
|
<Link href="/analytics" className="text-sm text-gray-700 hover:text-blue-500">
|
|
Analytics
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/links" className="text-sm text-gray-700 hover:text-blue-500">
|
|
Short Links
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/create-shorturl" className="text-sm text-gray-700 hover:text-blue-500">
|
|
Create Short URL
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
|
|
{user && (
|
|
<div className="flex items-center space-x-4">
|
|
<div className="text-sm text-gray-700">
|
|
{user.email}
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|