components/Headers.tsx

import * as React from 'react';
import Link from 'next/link';

import { auth } from '@/auth';
import { Button } from '@/components/ui/Buttons';
import { UserMenu } from '@/components/UserMenu';
import { IconSeparator } from './ui/Icon';

export async function Header() {
	const session = await auth();

	if (!session?.user) {
		return null;
	}

	return (
		<header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
			<Button variant="link" asChild className="mr-2">
				<Link href="/project">Projects</Link>
			</Button>
			<Button variant="link" asChild className="mr-2">
				<Link href="/chat">Chat</Link>
			</Button>
			<IconSeparator className="size-6 text-muted-foreground/50" />
			<div className="flex items-center">
				<UserMenu user={session!.user} />
			</div>
		</header>
	);
}