openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { cn } from "@/lib/utils";
4import Link from "next/link";
5import { usePathname } from "next/navigation";
6import { Fragment } from "react";
7import { CopyButton } from "./copy-button";
8
9export function SubNav({ className, ...props }: React.ComponentProps<"div">) {
10 const pathname = usePathname();
11 const segments = pathname.split("/").filter(Boolean).slice(0, -1);
12
13 return (
14 <div
15 className={cn("flex items-center justify-between gap-2", className)}
16 {...props}
17 >
18 <div className="prose px-4 text-muted-foreground">
19 {segments.map((segment, index) => (
20 <Fragment key={segment}>
21 <Link href={`/${segments.slice(0, index + 1).join("/")}`}>
22 {segment}
23 </Link>
24 {index < segments.length - 1 ? (
25 <span className="text-muted-foreground">{" | "}</span>
26 ) : null}
27 </Fragment>
28 ))}
29 </div>
30 <CopyButton
31 copyText={typeof window !== "undefined" ? window.location.href : ""}
32 />
33 </div>
34 );
35}