gitfor/platform

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { useRepo } from "~/hooks/use-repo";
import { SideNav, SideNavLayout, SideNavLink } from "~/ui/Nav";

const NAV = [
  { to: "/$owner/$repo/security", label: "Overview", exact: true, needsWrite: false },
  { to: "/$owner/$repo/security/advisories", label: "Advisories", exact: false, needsWrite: false },
  { to: "/$owner/$repo/security/secret-scanning", label: "Secret scanning", exact: false, needsWrite: true },
  { to: "/$owner/$repo/security/code-scanning", label: "Code scanning", exact: false, needsWrite: true },
  { to: "/$owner/$repo/security/dependencies", label: "Dependencies", exact: false, needsWrite: false },
] as const;

export const Route = createFileRoute("/$owner/$repo/security")({
  component: SecurityLayout,
});

function SecurityLayout() {
  const params = Route.useParams();
  const { permission } = useRepo();
  const canWrite = permission === "write" || permission === "admin";
  return (
    <SideNavLayout>
      <SideNav title="Security">
        {NAV.filter((item) => canWrite || !item.needsWrite).map((item) => (
          <SideNavLink key={item.to} to={item.to} params={params} activeOptions={{ exact: item.exact }}>
            {item.label}
          </SideNavLink>
        ))}
      </SideNav>
      <div className="min-w-0 space-y-6">
        <Outlet />
      </div>
    </SideNavLayout>
  );
}