Install tabs

"use client";

import * as React from "react";

import { CopyButton } from "@/components/ui/copy-button";
import { cn } from "@/lib/utils";

type Install = { label: string; command: string };

// The brand's install box (install-tabs.tsx; computed): one line to install the SDK on ink, with a tab per package
// manager and the dark Copy key. 12px corners on a 9 percent ink edge with the code box's drop; the tabs are the 13px
// platform mono, half white and turning white under the pointer, the selected one on a 2px white rule. The command is
// 14px mono: the tool in the lifted blue, its arguments in sky. Arrow keys, Home and End move between tabs.
function InstallTabs({ commands, label = "Package manager", defaultIndex = 0, className }: { commands: Install[]; label?: string; defaultIndex?: number; className?: string }) {
  const [active, setActive] = React.useState(defaultIndex);
  const id = React.useId();
  const tab = commands[active] ?? commands[0];
  if (!tab) return null;
  const [tool, ...args] = tab.command.split(" ");

  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
    const last = commands.length - 1;
    const next = { ArrowRight: active === last ? 0 : active + 1, ArrowLeft: active === 0 ? last : active - 1, Home: 0, End: last }[event.key];
    if (next === undefined) return;
    event.preventDefault();
    setActive(next);
    event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[next]?.focus();
  };

  return (
    <div data-slot="install-tabs" className={cn("w-full max-w-md overflow-hidden rounded-panel border border-line bg-code text-left shadow-code", className)}>
      <div className="flex items-center justify-between border-b border-line-on-code pr-2 pl-3">
        <div role="tablist" aria-label={label} className="flex">
          {commands.map((t, i) => (
            <button
              key={t.label}
              type="button"
              role="tab"
              id={`${id}-tab-${i}`}
              aria-selected={i === active}
              aria-controls={`${id}-panel`}
              tabIndex={i === active ? 0 : -1}
              onClick={() => setActive(i)}
              onKeyDown={onKeyDown}
              className={cn(
                "-mb-px border-b-2 px-3 py-2.5 font-mono text-snippet leading-none outline-none transition-[border-color,color] duration-160 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-sky",
                i === active ? "border-white text-white" : "border-transparent text-white/50 hover:text-white/80",
              )}
            >
              {t.label}
            </button>
          ))}
        </div>
        <CopyButton key={active} value={tab.command} label={`Copy ${tab.label} command`} dark />
      </div>
      <div role="tabpanel" id={`${id}-panel`} aria-labelledby={`${id}-tab-${active}`} className="px-5 py-4 font-mono text-body-sm leading-code text-fg-code">
        <span className="text-fg-code-key">{tool}</span> <span className="text-fg-code-string">{args.join(" ")}</span>
      </div>
    </div>
  );
}

export { InstallTabs };
export type { Install };