superlog/apps/web/src/CodeTabs.tsx

import { useEffect, useState } from "react";
import { type HighlighterCore, createHighlighterCore } from "shiki/core";
import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
import bash from "shiki/langs/bash.mjs";
import json from "shiki/langs/json.mjs";
import githubDarkDefault from "shiki/themes/github-dark-default.mjs";

export type CodeTab = {
  id: string;
  label: string;
  language: string;
  code: string;
  icon: "anthropic" | "claude" | "cursor";
};

const iconPaths: Record<CodeTab["icon"], string> = {
  anthropic:
    "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z",
  claude:
    "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z",
  cursor:
    "M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23",
};

let highlighterPromise: Promise<HighlighterCore> | null = null;

type HighlightedToken = {
  content: string;
  color?: string;
  fontStyle?: number;
  offset?: number;
};

export function CodeTabs({ tabs }: { tabs: CodeTab[] }) {
  const [activeId, setActiveId] = useState(tabs[0]?.id ?? "");
  const active = tabs.find((tab) => tab.id === activeId) ?? tabs[0];

  if (!active) return null;

  return (
    <div>
      <div className="flex flex-wrap items-end justify-between gap-3 border-b border-border">
        <div
          role="tablist"
          aria-label="MCP setup target"
          className="flex min-w-0 flex-wrap items-end gap-1"
        >
          {tabs.map((tab) => {
            const selected = tab.id === active.id;
            return (
              <button
                key={tab.id}
                type="button"
                role="tab"
                aria-selected={selected}
                onClick={() => setActiveId(tab.id)}
                className={`relative -mb-px inline-flex h-9 items-center gap-2 border-b-[2px] px-3 font-mono text-[12px] tracking-tight transition-colors ${
                  selected ? "border-accent text-fg" : "border-transparent text-muted hover:text-fg"
                }`}
              >
                <BrandIcon icon={tab.icon} />
                {tab.label}
              </button>
            );
          })}
        </div>
        <CopyButton code={active.code} />
      </div>
      <HighlightedCode code={active.code} language={active.language} />
    </div>
  );
}

function HighlightedCode({
  code,
  language,
}: {
  code: string;
  language: string;
}) {
  const [tokens, setTokens] = useState<HighlightedToken[][] | null>(null);

  useEffect(() => {
    let cancelled = false;
    setTokens(null);

    getHighlighter()
      .then(
        (highlighter) =>
          highlighter.codeToTokens(code, {
            lang: language,
            theme: "github-dark-default",
          }).tokens,
      )
      .then((nextTokens) => {
        if (!cancelled) setTokens(nextTokens);
      })
      .catch(() => {
        if (!cancelled) setTokens(null);
      });

    return () => {
      cancelled = true;
    };
  }, [code, language]);

  if (!tokens) {
    return (
      <pre className="overflow-x-auto bg-[#0d1117] p-5 font-mono text-[12px] leading-relaxed text-fg">
        <code>{code}</code>
      </pre>
    );
  }

  return (
    <pre className="superlog-code overflow-x-auto bg-[#0d1117] p-5 font-mono text-[12px] leading-relaxed">
      <code>
        {tokens.map((line, lineIndex) => (
          <span key={`${lineIndex}-${line.length}`} className="block">
            {line.map((token) => (
              <span
                key={`${token.offset}-${token.content}`}
                style={{
                  color: token.color,
                  fontStyle: (token.fontStyle ?? 0) & 1 ? "italic" : undefined,
                  fontWeight: (token.fontStyle ?? 0) & 2 ? 700 : undefined,
                }}
              >
                {token.content}
              </span>
            ))}
          </span>
        ))}
      </code>
    </pre>
  );
}

function getHighlighter() {
  highlighterPromise ??= createHighlighterCore({
    themes: [githubDarkDefault],
    langs: [bash, json],
    engine: createJavaScriptRegexEngine(),
  });
  return highlighterPromise;
}

function BrandIcon({ icon }: { icon: CodeTab["icon"] }) {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24" className="h-3.5 w-3.5 fill-current">
      <path d={iconPaths[icon]} />
    </svg>
  );
}

function CopyButton({ code }: { code: string }) {
  const [copied, setCopied] = useState(false);

  function copy() {
    navigator.clipboard.writeText(code).catch(() => {});
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1600);
  }

  return (
    <button
      type="button"
      onClick={copy}
      aria-label="Copy setup snippet"
      title="Copy"
      className="inline-flex h-9 items-center gap-2 bg-transparent px-2 font-mono text-[10px] uppercase tracking-[0.16em] text-muted transition-colors hover:text-fg"
    >
      {copied ? <CheckIcon /> : <CopyIcon />}
      <span>{copied ? "copied" : "copy"}</span>
    </button>
  );
}

function CopyIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className="h-3.5 w-3.5"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="14" height="14" x="8" y="8" rx="1" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className="h-3.5 w-3.5"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
}