58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import Link from 'next/link'
|
|
import { Shield, Database, ExternalLink, Code2 } from 'lucide-react'
|
|
import { SignOutButton } from '@/components/SignOutButton'
|
|
import { AppIcon } from './AppIcon'
|
|
|
|
interface NavbarProps {
|
|
appName?: string
|
|
appId?: string
|
|
iconUrl?: string | null
|
|
}
|
|
|
|
export function Navbar({ appName, appId, iconUrl }: NavbarProps) {
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-slate-800/80 bg-[#080B11]/80 backdrop-blur-xl">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
|
{/* Brand & Breadcrumbs */}
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/dashboard" className="flex items-center gap-2.5 group">
|
|
<div className="w-8 h-8 bg-gradient-to-tr from-emerald-600 to-emerald-400 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:scale-105 transition-transform">
|
|
<Shield className="w-4 h-4 text-slate-950 stroke-[2.4]" />
|
|
</div>
|
|
<span className="text-white font-bold text-base tracking-tight">ConfigVault</span>
|
|
</Link>
|
|
|
|
{appName && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<span className="text-slate-600">/</span>
|
|
<Link
|
|
href="/dashboard"
|
|
className="text-slate-400 hover:text-slate-200 transition-colors text-xs font-medium"
|
|
>
|
|
Uygulamalar
|
|
</Link>
|
|
<span className="text-slate-600">/</span>
|
|
<span className="inline-flex items-center gap-1.5 text-emerald-400 font-semibold text-xs px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20">
|
|
<AppIcon name={appName} iconUrl={iconUrl} size="sm" className="w-4 h-4 rounded text-[10px]" />
|
|
<span>{appName}</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right tools & status */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden sm:flex items-center gap-2 px-2.5 py-1 rounded-full bg-slate-900/80 border border-slate-800 text-[11px] text-slate-400">
|
|
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
|
<span>PostgreSQL Aktif</span>
|
|
</div>
|
|
|
|
<div className="h-4 w-[1px] bg-slate-800 hidden sm:block" />
|
|
|
|
<SignOutButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|