Spaces:
Running
Running
File size: 3,545 Bytes
dce7eca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | "use client";
import { useSession, signIn, signOut } from "next-auth/react";
import { LogIn, LogOut, User, Camera, Github, Rocket, History, Download, Share2 } from "lucide-react";
import Image from "next/image";
export default function Navbar() {
const { data: session } = useSession();
return (
<nav className="flex items-center justify-between px-6 py-4 glass border-b border-white/10 sticky top-0 z-50">
<div className="flex items-center gap-2">
<div className="w-10 h-10 bg-gradient-to-tr from-primary to-accent rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
<Camera className="text-white w-6 h-6" />
</div>
<span className="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/60">
PanoAI
</span>
</div>
<div className="hidden md:flex items-center gap-6">
<button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
<Download className="w-4 h-4" />
<span>Export</span>
</button>
<button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
<Share2 className="w-4 h-4" />
<span>Share</span>
</button>
<button className="text-white/60 hover:text-white transition-colors flex items-center gap-2">
<History className="w-4 h-4" />
<span>History</span>
</button>
</div>
<div className="flex items-center gap-4">
{session ? (
<div className="flex items-center gap-3">
<div className="text-right hidden sm:block">
<p className="text-sm font-medium text-white">{session.user?.name}</p>
<p className="text-xs text-white/50">{session.user?.email}</p>
</div>
{session.user?.image ? (
<Image
src={session.user.image}
alt="Profile"
width={36}
height={36}
className="rounded-full border border-white/20"
/>
) : (
<div className="w-9 h-9 bg-white/10 rounded-full flex items-center justify-center">
<User className="w-5 h-5 text-white/60" />
</div>
)}
<button
onClick={() => signOut()}
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-white/60 hover:text-white"
>
<LogOut className="w-5 h-5" />
</button>
</div>
) : (
<button
onClick={() => signIn("google")}
className="btn-primary flex items-center gap-2"
>
<LogIn className="w-4 h-4" />
<span>Sign In</span>
</button>
)}
</div>
</nav>
);
}
|