Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
4.4 kB · 161 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162import { Dark, Light } from "@openstatus/icons";import { AtSign, KeyRound, Palette, Pencil, Plus, Users } from "lucide-react";
import { HELP_LINKS, HELP_SUPPORT } from "@/config/help";import { NAV_MENU_ITEMS } from "@/config/nav";import { SETTINGS_TABS } from "@/config/settings";
import type { CommandMenuGroup, CommandMenuItem } from "../types";
export function navigationGroup(): CommandMenuGroup { return { heading: "Navigation", items: NAV_MENU_ITEMS.map((item) => ({ value: item.label, label: item.label, icon: item.icon, keywords: item.keywords, action: { type: "navigate", href: item.href }, })), };}
export function createStatusReportItem(pageId?: number): CommandMenuItem { return { value: pageId ? "create-status-report" : "Create Status Report", label: "Create Status Report", icon: Plus, keywords: ["incident", "announce", "publish"], action: { type: "sheet", sheet: { sheet: "status-report", pageId } }, };}
export function createMaintenanceItem(pageId?: number): CommandMenuItem { return { value: pageId ? "create-maintenance" : "Create Maintenance", label: "Create Maintenance", icon: Plus, keywords: ["downtime", "window", "schedule"], action: { type: "sheet", sheet: { sheet: "maintenance", pageId } }, };}
export function createGroup(): CommandMenuGroup { return { heading: "Create", items: [ { value: "Create Monitor", label: "Create Monitor", icon: Plus, keywords: ["new monitor"], action: { type: "navigate", href: "/monitors/create" }, }, { value: "Create Status Page", label: "Create Status Page", icon: Plus, keywords: ["new page"], action: { type: "navigate", href: "/status-pages/create" }, }, createStatusReportItem(), createMaintenanceItem(), ], };}
// Deep-links into settings cards via anchor ids. Icons are only used here, so// they live with the command menu rather than a shared config.const SETTINGS_ANCHORS: CommandMenuItem[] = [ { value: "API Keys", label: "API Keys", icon: KeyRound, keywords: ["token", "key"], action: { type: "navigate", href: "/settings/general#api-keys" }, }, { value: "Team Members", label: "Team Members", icon: Users, keywords: ["invite", "member"], action: { type: "navigate", href: "/settings/general#team-members" }, }, { value: "Workspace Slug", label: "Workspace Slug", icon: AtSign, action: { type: "navigate", href: "/settings/general#workspace-slug" }, }, { value: "Workspace Name", label: "Workspace Name", icon: Pencil, keywords: ["rename"], action: { type: "navigate", href: "/settings/general#workspace-name" }, }, { value: "Appearance", label: "Appearance", icon: Palette, keywords: ["theme", "dark mode"], action: { type: "navigate", href: "/settings/account#appearance" }, },];
export function settingsGroup(): CommandMenuGroup { return { heading: "Settings", items: [ ...SETTINGS_TABS.map((tab) => ({ value: tab.label, label: tab.label, icon: tab.icon, keywords: tab.keywords, action: { type: "navigate" as const, href: tab.href }, })), ...SETTINGS_ANCHORS, ], };}
export function helpGroup(): CommandMenuGroup { return { heading: "Get Help", items: [ { value: HELP_SUPPORT.label, label: HELP_SUPPORT.label, icon: HELP_SUPPORT.icon, keywords: HELP_SUPPORT.keywords, action: { type: "sheet", sheet: { sheet: "support" } }, }, ...HELP_LINKS.map((link) => ({ value: link.label, label: link.label, icon: link.icon, keywords: link.keywords, action: { type: "external" as const, href: link.href }, })), ], };}
export function themeGroup( resolvedTheme: string | undefined, setTheme: (t: string) => void,): CommandMenuGroup { const target = resolvedTheme === "dark" ? "light" : "dark"; return { heading: "Theme", items: [ { value: "toggle-theme", label: `Switch to ${target} theme`, icon: resolvedTheme === "dark" ? Light : Dark, keywords: ["dark", "light", "appearance"], action: { type: "run", run: () => setTheme(target) }, }, ], };}