Function CodeBlockCommand

components/docs/code-block-command.tsx:37–135

({
  prompt,
  pnpm,
  yarn,
  npm,
  bun,
  component,
  variant = "muted",
}: CodeBlockCommandProps)

   */
  variant?: "muted" | "outline" | "plain";
}

export function CodeBlockCommand({
  prompt,
  pnpm,
  yarn,
  npm,
  bun,
  component,
  variant = "muted",
}: CodeBlockCommandProps) {
  const [packageManager, setPackageManager] = usePackageManager();
  const trackEvent = useTrackEvent();

  const tabs = useMemo(
    () => ({ prompt, pnpm, yarn, npm, bun }),
    [prompt, pnpm, yarn, npm, bun],
  );

  const tabsFiltered = useMemo(
    () => Object.entries(tabs).filter(([, value]) => !!value),
    [tabs],
  );

  const activeCommand = tabs[packageManager] || "";

  return (
    <div
      className={cn(
        "not-prose relative overflow-hidden rounded-xl",
        variant === "outline" && "border border-border bg-card",
        variant === "muted" && "bg-muted",
      )}
    >
      <TabsPrimitive.Root
        value={packageManager}
        onValueChange={(value) => setPackageManager(value as PackageManager)}
        className="flex flex-col"
      >
        <div className="px-4 shadow-[inset_0_-1px_0_0] shadow-border">
          <TabsPrimitive.List className="relative z-0 flex h-10 w-fit items-center gap-1 [&_svg]:me-2 [&_svg]:size-4 [&_svg]:text-muted-foreground">
            {getIconForPackageManager(packageManager)}

            {tabsFiltered.map(([key]) => (
              <TabsPrimitive.Tab
                key={key}
                value={key}
                className={cn(
                  "relative h-7 rounded-md px-2 font-mono text-sm font-medium whitespace-nowrap transition-colors outline-none",
                  "text-muted-foreground hover:text-foreground",
                  "data-active:text-foreground",
                  "focus-visible:ring-2 focus-visible:ring-ring/40",
                )}
              >
                {key}
              </TabsPrimitive.Tab>
            ))}