app/components/project-tabs.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/legal.tsx, app/routes/media.tsx, app/routes/mentions.tsx, app/routes/project.flags.tsx, app/routes/project.tsx, app/routes/project.voice.tsx.

Source

1// The sections of a site project, as Capsomer's link tabs: each is a page of its own, so each is a link.
2
3import { Link } from "react-router";
4import { TabsNav } from "capsomer/react/tabs";
5
6const SECTIONS = [
7  { id: "posts", label: "Posts", path: "" },
8  { id: "media", label: "Media", path: "/media" },
9  { id: "legal", label: "Legal", path: "/legal" },
10  { id: "mentions", label: "Mentions", path: "/mentions" },
11  { id: "flags", label: "Flags", path: "/flags" },
12  { id: "voice", label: "Voice", path: "/voice" },
13] as const;
14
15/** `mentions` says whether this person may see the Mentions tab: the queue is the Owner's alone (roles.ts). */
16export function ProjectTabs({ slug, current, mentions = false }: { slug: string; current: (typeof SECTIONS)[number]["id"]; mentions?: boolean }) {
17  return (
18    <TabsNav aria-label={`Sections of this project`} variant="line">
19      {SECTIONS.filter((s) => s.id !== "mentions" || mentions).map((s) => (
20        <Link key={s.id} to={`/p/${slug}${s.path}`} className="cap-tab" aria-current={s.id === current ? "page" : undefined}>
21          {s.label}
22        </Link>
23      ))}
24    </TabsNav>
25  );
26}