45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import type { HeaderProps } from '@/types/component-props';
|
|
import Link from 'next/link';
|
|
|
|
export default function Header({ user = null }: HeaderProps) {
|
|
return (
|
|
<header className="border-b bg-white">
|
|
<div className="container mx-auto px-4 py-3 flex items-center justify-between">
|
|
<Link href="/" className="text-xl font-bold text-gray-900">
|
|
NoteToApp
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-6">
|
|
{user ? (
|
|
<>
|
|
<Link href="/dashboard" className="text-sm text-gray-600 hover:text-gray-900">
|
|
Dashboard
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-medium">
|
|
{user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="text-sm text-gray-700">{user.name}</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="text-sm text-gray-600 hover:text-gray-900">
|
|
Login
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="text-sm bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
|
|
>
|
|
Sign Up
|
|
</Link>
|
|
</>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|