Import Labyricorn Control Plane
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Terminal,
|
||||
GitBranch,
|
||||
Sliders,
|
||||
FileText,
|
||||
Palette,
|
||||
PlayCircle,
|
||||
Server,
|
||||
UploadCloud,
|
||||
Eye,
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
CheckCircle2,
|
||||
AlertTriangle,
|
||||
RotateCcw,
|
||||
} from "lucide-react";
|
||||
import { NginxStatus, BuildRecord, PushTarget } from "../types";
|
||||
|
||||
interface NavbarProps {
|
||||
activeTab: string;
|
||||
setActiveTab: (tab: string) => void;
|
||||
nginxStatus: NginxStatus | null;
|
||||
activeBuild: BuildRecord | null;
|
||||
primaryPushTarget: PushTarget | null;
|
||||
onQuickBuild: () => void;
|
||||
onQuickNginxTest: () => void;
|
||||
isBuilding: boolean;
|
||||
}
|
||||
|
||||
export const Navbar: React.FC<NavbarProps> = ({
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
nginxStatus,
|
||||
activeBuild,
|
||||
primaryPushTarget,
|
||||
onQuickBuild,
|
||||
onQuickNginxTest,
|
||||
isBuilding,
|
||||
}) => {
|
||||
const tabs = [
|
||||
{ id: "dashboard", label: "Dashboard", icon: Activity },
|
||||
{ id: "repositories", label: "Repositories", icon: GitBranch },
|
||||
{ id: "explorer", label: "Site Explorer", icon: Eye },
|
||||
{ id: "artifacts", label: "Artifacts", icon: FileText },
|
||||
{ id: "projections", label: "Projections", icon: Palette },
|
||||
{ id: "publishing", label: "Publishing", icon: PlayCircle },
|
||||
{ id: "targets", label: "Publishing Targets", icon: UploadCloud },
|
||||
{ id: "local-site", label: "Local Site", icon: Server },
|
||||
{ id: "system", label: "System", icon: ShieldCheck },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="bg-[#0F0F0F] text-white border-b border-[#1F1F1F] sticky top-0 z-50">
|
||||
{/* TOP BRAND BAR */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-9 h-9 rounded-sm bg-gradient-to-tr from-[#8A6D3B] to-[#C5A059] flex items-center justify-center font-serif italic text-black font-bold text-lg shadow-md shadow-[#C5A059]/10">
|
||||
L
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-serif italic text-lg tracking-tight text-white">
|
||||
Labyricorn
|
||||
</span>
|
||||
<span className="px-2 py-0.5 text-[10px] font-mono font-semibold bg-[#C5A059]/10 text-[#C5A059] border border-[#C5A059]/30 rounded-xs uppercase tracking-widest">
|
||||
v1.0.0-MVP
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-400 hidden sm:block">
|
||||
Git-backed Static Site Control Plane & Nginx Host
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SYSTEM STATUS BADGES & QUICK ACTIONS */}
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Active Release Badge */}
|
||||
<div className="hidden lg:flex items-center space-x-2 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs font-mono text-neutral-300">
|
||||
<span className="text-neutral-500">current -></span>
|
||||
<span className="text-[#C5A059] font-semibold">
|
||||
{activeBuild ? activeBuild.id : "none"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Nginx Status Badge */}
|
||||
<div className="hidden md:flex items-center space-x-1.5 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs text-neutral-300">
|
||||
<span
|
||||
className={`w-2 h-2 rounded-full ${nginxStatus?.configValid ? "bg-emerald-500" : "bg-amber-500"}`}
|
||||
></span>
|
||||
<span className="font-medium text-neutral-300">
|
||||
Nginx: {nginxStatus?.configValid ? "Active (Port 80)" : "Error"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Push Target Status */}
|
||||
{primaryPushTarget && (
|
||||
<div className="hidden xl:flex items-center space-x-1.5 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs text-neutral-300">
|
||||
<span className="text-[#C5A059] font-mono">VPS:</span>
|
||||
<span className="text-neutral-200 font-medium">
|
||||
{primaryPushTarget.host}
|
||||
</span>
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QUICK BUILD BUTTON */}
|
||||
<button
|
||||
onClick={onQuickBuild}
|
||||
disabled={isBuilding}
|
||||
className="px-3.5 py-1.5 bg-[#C5A059] hover:bg-[#b38f4a] text-black font-semibold rounded-sm text-xs transition-colors shadow-xs flex items-center space-x-1.5 disabled:opacity-50"
|
||||
>
|
||||
<PlayCircle
|
||||
className={`w-3.5 h-3.5 ${isBuilding ? "animate-spin" : ""}`}
|
||||
/>
|
||||
<span className="uppercase tracking-wider text-[11px]">
|
||||
{isBuilding ? "Building..." : "Trigger Build"}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NAVIGATION TAB STRIP */}
|
||||
<div className="border-t border-[#1F1F1F] bg-[#0A0A0A]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 overflow-x-auto no-scrollbar">
|
||||
<nav className="flex space-x-1 py-1 text-xs font-medium min-w-max">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center space-x-2 px-3.5 py-2 rounded-sm transition-all ${
|
||||
isActive
|
||||
? "bg-[#181818] text-[#C5A059] border-b-2 border-[#C5A059] font-semibold"
|
||||
: "text-neutral-400 hover:text-white hover:bg-[#141414]"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-3.5 h-3.5 ${isActive ? "text-[#C5A059]" : "text-neutral-500"}`}
|
||||
/>
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user