2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Te6e,"use client"; import { ChevronRight, MoreHorizontal } from "lucide-react"; import { Slot } from "radix-ui"; import { createContext, useContext, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Separator = "chevron" | "slash" | "dot"; type Variant = "plain" | "pill"; const BreadcrumbContext = createContext<{ separator: Separator; variant: Variant }>({ separator: "chevron", variant: "plain" }); export interface BreadcrumbProps extends ComponentProps<"nav"> { separator?: Separator; /** plain: text links · pill: a contained path bar with the current page raised. */ variant?: Variant; } export function Breadcrumb({ separator = "chevron", variant = "plain", ...props }: BreadcrumbProps) { return (

); } export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) { const { variant } = useContext(BreadcrumbContext); return (

; } const PILL_ITEM = "h-7 rounded-full px-2.5"; export function BreadcrumbLink({ asChild = false, className, ...props }: ComponentProps<"a"> & { asChild?: boolean }) { const { variant } = useContext(BreadcrumbContext); const Comp = asChild ? Slot.Root : "a"; return ( ); } export function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) { const { variant } = useContext(BreadcrumbContext); return ( ); } export function BreadcrumbSeparator({ className, children, ...props }: ComponentProps<"li">) { const { separator, variant } = useContext(BreadcrumbContext); return (
{children ?? (separator === "slash" ? ( / ) : separator === "dot" ? ( ) : ( ))}

"use client";

import { ChevronRight, MoreHorizontal } from "lucide-react";
import { Slot } from "radix-ui";
import { createContext, useContext, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Separator = "chevron" | "slash" | "dot";
type Variant = "plain" | "pill";

const BreadcrumbContext = createContext<{ separator: Separator; variant: Variant }>({ separator: "chevron", variant: "plain" });

export interface BreadcrumbProps extends ComponentProps<"nav"> {
  separator?: Separator;
  /** plain: text links · pill: a contained path bar with the current page raised. */
  variant?: Variant;
}

export function Breadcrumb({ separator = "chevron", variant = "plain", ...props }: BreadcrumbProps) {
  return (
    <BreadcrumbContext.Provider value={{ separator, variant }}>
      <nav aria-label="Breadcrumb" {...props} />
    </BreadcrumbContext.Provider>
  );
}

export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
  const { variant } = useContext(BreadcrumbContext);
  return (
    <ol
      className={cn(
        "flex flex-wrap items-center text-[13.5px] text-neutral-500 dark:text-neutral-400",
        variant === "pill" ? "w-fit gap-0.5 rounded-full bg-neutral-100 p-1 dark:bg-white/[0.06]" : "gap-1.5",
        className,
      )}
      {...props}
    />
  );
}

export function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
  return <li className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
}

const PILL_ITEM = "h-7 rounded-full px-2.5";

export function BreadcrumbLink({ asChild = false, className, ...props }: ComponentProps<"a"> & { asChild?: boolean }) {
  const { variant } = useContext(BreadcrumbContext);
  const Comp = asChild ? Slot.Root : "a";
  return (
    <Comp
      className={cn(
        "inline-flex items-center gap-1.5 rounded-md outline-none transition-colors hover:text-neutral-950 focus-visible:text-neutral-950 dark:hover:text-white dark:focus-visible:text-white [&_svg]:size-4",
        variant === "pill" && cn(PILL_ITEM, "hover:bg-white/70 dark:hover:bg-white/[0.06]"),
        className,
      )}
      {...props}
    />
  );
}

export function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
  const { variant } = useContext(BreadcrumbContext);
  return (
    <span
      aria-current="page"
      className={cn(
        "inline-flex items-center gap-1.5 font-medium text-neutral-950 dark:text-white [&_svg]:size-4",
        variant === "pill" &&
          cn(PILL_ITEM, "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:bg-neutral-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06)]"),
        className,
      )}
      {...props}
    />
  );
}

export function BreadcrumbSeparator({ className, children, ...props }: ComponentProps<"li">) {
  const { separator, variant } = useContext(BreadcrumbContext);
  return (
    <li role="presentation" aria-hidden className={cn("inline-flex items-center text-neutral-300 dark:text-neutral-600", variant === "pill" && "px-0.5", className)} {...props}>
      {children ??
        (separator === "slash" ? (
          <span className="text-[15px] font-light">/</span>
        ) : separator === "dot" ? (
          <span className="size-1 rounded-full bg-current" />
        ) : (
          <ChevronRight className="size-3.5" />
        ))}
    </li>
  );
}

export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
  return (
    <span role="presentation" aria-hidden className={cn("flex size-7 items-center justify-center", className)} {...props}>
      <MoreHorizontal className="size-4" />
    </span>
  );
}

export default Breadcrumb;

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/scalar-ui/breadcrumb";

export default function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Aurora</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Projects</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">aurora-web</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/scalar-ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb separator="slash">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">aurora</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">web</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>deployments</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

import { Folder, House } from "lucide-react";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/scalar-ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" aria-label="Home">
            <House />
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <Folder />
            Documents
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Q3 report.pdf</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Aurora {open && ( {hidden.map((h) => ( {h} ))} )} Runbooks Database failover

"use client";

import { AnimatePresence, motion } from "motion/react";
import { DropdownMenu } from "radix-ui";
import { useState } from "react";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/scalar-ui/breadcrumb";

const hidden = ["Engineering", "Platform", "Infrastructure"];

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Aurora</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu.Root open={open} onOpenChange={setOpen}>
            <DropdownMenu.Trigger
              aria-label="Show hidden folders"
              className="rounded-lg outline-none transition-colors hover:bg-neutral-100 hover:text-neutral-950 data-[state=open]:bg-neutral-100 dark:hover:bg-white/[0.08] dark:hover:text-white dark:data-[state=open]:bg-white/[0.08]"
            >
              <BreadcrumbEllipsis />
            </DropdownMenu.Trigger>
            <AnimatePresence>
              {open && (
                <DropdownMenu.Portal forceMount>
                  <DropdownMenu.Content forceMount asChild align="start" sideOffset={6} collisionPadding={8}>
                    <motion.div
                      initial={{ opacity: 0, scale: 0.96, y: -4 }}
                      animate={{ opacity: 1, scale: 1, y: 0 }}
                      exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                      transition={{ type: "spring", bounce: 0.16, duration: 0.3 }}
                      className="z-50 min-w-44 origin-(--radix-dropdown-menu-content-transform-origin) rounded-2xl bg-white p-1.5 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]"
                    >
                      {hidden.map((h) => (
                        <DropdownMenu.Item
                          key={h}
                          className="flex h-9 cursor-default items-center rounded-[10px] px-2.5 text-[13.5px] text-neutral-700 outline-none data-highlighted:bg-neutral-100 data-highlighted:text-neutral-950 dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white"
                        >
                          {h}
                        </DropdownMenu.Item>
                      ))}
                    </motion.div>
                  </DropdownMenu.Content>
                </DropdownMenu.Portal>
              )}
            </AnimatePresence>
          </DropdownMenu.Root>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Runbooks</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Database failover</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

import { Box, Rocket } from "lucide-react";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/scalar-ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb variant="pill">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <Box />
            aurora-web
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Deployments</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>
            <Rocket />
            #482
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/scalar-ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb separator="dot">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Help Center</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Billing</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Change your plan</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

\n \n \n Aurora\n \n \n \n Projects\n \n \n \n aurora-web\n \n \n \n Settings\n \n \n

\n \n \n aurora\n \n \n \n web\n \n \n \n deployments\n \n \n

\n \n \n \n \n \n \n \n \n \n \n Documents\n \n \n \n \n Q3 report.pdf\n \n \n

\n \n \n \n \n aurora-web\n \n \n \n \n Deployments\n \n \n \n \n \n #482\n \n \n \n

\n \n \n Help Center\n \n \n \n Billing\n \n \n \n Change your plan\n \n \n

Breadcrumbs

Breadcrumbs

Slash

With Icons

Collapsed

Pill

Dot