g1t/apps/web/app/components/repo-settings-heading.tsx
| 1 | import { useLocation } from "react-router"; |
| 2 | |
| 3 | /** Each of a project's settings pages: its name and what it is for. */ |
| 4 | const PAGES: Record<string, { title: string; about: string }> = { |
| 5 | "": { title: "General", about: "The project's name, where its code lives, and what it is for." }, |
| 6 | deployments: { title: "Deployments", about: "How the project builds, where it runs, and its previews." }, |
| 7 | domains: { title: "Domains", about: "Addresses of your own for the production deployment." }, |
| 8 | dependencies: { title: "Dependencies", about: "What the project relies on and what relies on it." }, |
| 9 | agents: { title: "Agents", about: "How g1t's agents pick up work here, and what they read first." }, |
| 10 | guardrails: { title: "Guardrails", about: "What agents may reach, run and spend while they work here." }, |
| 11 | repository: { title: "Repository", about: "Branches, protection, merging and who can see the code." }, |
| 12 | secrets: { title: "Secrets and variables", about: "Values workflows, builds and deployments read at run time." }, |
| 13 | webhooks: { title: "Webhooks", about: "Addresses g1t calls when something happens in the project." }, |
| 14 | }; |
| 15 | |
| 16 | /** |
| 17 | * The heading of a project's settings page, named from the address. The |
| 18 | * pages themselves are listed in the sidebar while you are in settings. |
| 19 | */ |
| 20 | export function RepoSettingsHeading({ base }: { base: string }) { |
| 21 | const { pathname } = useLocation(); |
| 22 | const section = pathname.slice(`${base}/settings`.length).replace(/^\//, "").split("/")[0] ?? ""; |
| 23 | const page = PAGES[section] ?? PAGES[""]!; |
| 24 | return ( |
| 25 | <header className="mb-8 border-b border-line pb-5"> |
| 26 | <h1 className="text-lg font-semibold tracking-tight">{page.title}</h1> |
| 27 | <p className="mt-1 text-sm text-muted">{page.about}</p> |
| 28 | </header> |
| 29 | ); |
| 30 | } |