openstatus.dev
Openstatus
www.openstatus.dev
1import { headerLinks } from "@/data/content";
2import {
3 DropdownMenu,
4 DropdownMenuContent,
5 DropdownMenuItem,
6 DropdownMenuTrigger,
7} from "@openstatus/ui";
8import {
9 ContextMenu,
10 ContextMenuContent,
11 ContextMenuItem,
12 ContextMenuTrigger,
13} from "@openstatus/ui";
14import Link from "next/link";
15import { CmdK } from "./cmdk";
16
17export function Header() {
18 return (
19 <header className="grid grid-cols-3 gap-px border border-border bg-border lg:grid-cols-6 [&>*]:bg-background [&>*]:px-4 [&>*]:py-4 [&>*]:hover:bg-muted">
20 <ContextMenu>
21 <ContextMenuTrigger className="group" asChild>
22 <Link href="/" className="relative flex items-center gap-2">
23 <img
24 src="/assets/landing/openstatus-logo.svg"
25 alt="openstatus logo"
26 width={20}
27 height={20}
28 className="rounded-full border border-border dark:border-foreground"
29 />
30 <span className="hidden sm:block">openstatus</span>
31 <div className="absolute right-0.5 bottom-0 hidden group-hover:block">
32 <span className="text-[10px] text-muted-foreground/50">
33 [right click]
34 </span>
35 </div>
36 </Link>
37 </ContextMenuTrigger>
38 <ContextMenuContent className="min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-none">
39 <ContextMenuItem className="rounded-none px-2 py-3 font-mono" asChild>
40 {/* FIXME: use relative path */}
41 <a
42 href="https://openstatus.dev/assets/logos/OpenStatus.svg"
43 download="openstatus.svg"
44 >
45 Download Name SVG
46 </a>
47 </ContextMenuItem>
48 <ContextMenuItem className="rounded-none px-2 py-3 font-mono" asChild>
49 <a
50 href="https://openstatus.dev/assets/logos/OpenStatus-Logo.svg"
51 download="openstatus-logo.svg"
52 >
53 Download Logo SVG
54 </a>
55 </ContextMenuItem>
56 </ContextMenuContent>
57 </ContextMenu>
58 {headerLinks.map((section, _) => (
59 <DropdownMenu key={section.label}>
60 <DropdownMenuTrigger className="group flex items-center gap-1 data-[state=open]:bg-muted">
61 <span className="w-full truncate text-left">{section.label}</span>
62 <span
63 className="relative top-[1px] shrink-0 origin-center text-[10px] text-muted-foreground transition duration-300 group-hover:text-foreground group-data-[state=open]:rotate-180 group-data-[state=open]:text-foreground"
64 aria-hidden="true"
65 >
66 ▲
67 </span>
68 </DropdownMenuTrigger>
69 <DropdownMenuContent
70 align="start"
71 className="min-w-[var(--radix-dropdown-menu-trigger-width)] rounded-none"
72 alignOffset={0}
73 sideOffset={0}
74 >
75 {section.items.map((item) => (
76 <DropdownMenuItem
77 key={item.href}
78 className="rounded-none px-2 py-3 font-mono"
79 asChild
80 >
81 <Link href={item.href}>{item.label}</Link>
82 </DropdownMenuItem>
83 ))}
84 </DropdownMenuContent>
85 </DropdownMenu>
86 ))}
87 <Link href="/pricing" className="truncate">
88 Pricing
89 </Link>
90 <CmdK />
91 <Link
92 href="https://app.openstatus.dev/login"
93 className="truncate text-info"
94 >
95 Dashboard
96 </Link>
97 </header>
98 );
99}