60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useSpace } from "@/components/SpaceProvider";
|
|
import { FileText, Users, Settings, LayoutDashboard, Coins } from "lucide-react";
|
|
|
|
export function SpaceNav() {
|
|
const pathname = usePathname();
|
|
const { space, membership } = useSpace();
|
|
|
|
const links = [
|
|
{ href: "/", label: "Dashboard", icon: LayoutDashboard },
|
|
{ href: "/proposals", label: "Proposals", icon: FileText },
|
|
{ href: "/members", label: "Members", icon: Users },
|
|
...(membership?.role === "ADMIN"
|
|
? [{ href: "/settings", label: "Settings", icon: Settings }]
|
|
: []),
|
|
];
|
|
|
|
// Strip the /s/[slug] prefix to match against subdomain-style paths
|
|
const cleanPath = pathname.replace(/^\/s\/[^/]+/, "") || "/";
|
|
|
|
return (
|
|
<div className="border-b bg-card/50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-12">
|
|
<div className="flex items-center gap-1">
|
|
{links.map((link) => {
|
|
const isActive = cleanPath === link.href || (link.href !== "/" && cleanPath.startsWith(link.href));
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors ${
|
|
isActive
|
|
? "bg-primary/10 text-primary font-medium"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
|
}`}
|
|
>
|
|
<link.icon className="h-4 w-4" />
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
{membership && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Coins className="h-4 w-4 text-orange-500" />
|
|
<span className="font-medium text-orange-600">{membership.credits}</span>
|
|
<span>credits</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|