Install Command

"use client"

import * as React from "react"
import { CheckIcon, CopyIcon } from "@phosphor-icons/react"
import { cn } from "cn"

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
} from "@/components/ui/input-group"

/**
 * A command to copy, such as an install line in a hero or docs page: a `$`
 * prompt, the command in monospace and a copy button, in the stock
 * `InputGroup`. A long command is cut off with an ellipsis.
 *
 * After a copy, the button shows a check for two seconds and a hidden status
 * says "Copied". If copying fails, the command is selected and a message
 * below asks the reader to press ⌘C or Ctrl+C. Over artwork, add
 * `className="dark"`. `className` lands on the `InputGroup`.
 */
function InstallCommand({
  className,
  children,
  ...props
}: Omit<React.ComponentProps<typeof InputGroup>, "children"> & {
  /**
   * The command, as plain text or inline elements such as `span`s for
   * highlighting. The button copies the text as it shows, so block elements
   * would be copied with no space between them.
   */
  children: React.ReactNode
}) {
  const { copied, failed, copyToClipboard } = useCopyToClipboard()
  const snippetRef = React.useRef<HTMLElement>(null)

  // On failure the command is selected, so one keystroke copies it by hand.
  const copy = async () => {
    const code = snippetRef.current
    if (!code) return
    if (!(await copyToClipboard(code.textContent ?? ""))) {
      window.getSelection()?.selectAllChildren(code)
    }
  }

  return (
    <InputGroup
      data-copied={copied || undefined}
      className={cn(
        "h-11 border-border bg-card font-mono text-card-foreground",
        className
      )}
      {...props}
    >
      <InputGroupAddon aria-hidden="true" className="pr-2 pl-4 font-normal">
        $
      </InputGroupAddon>
      <InputGroupText className="min-w-0 flex-1 text-sm/7 text-current">
        <code ref={snippetRef} className="truncate">
          {children}
        </code>
      </InputGroupText>
      <InputGroupAddon align="inline-end">
        <InputGroupButton
          size="icon-sm"
          onClick={copy}
          aria-label={
            copied ? "Copied" : failed ? "Copy failed" : "Copy command"
          }
        >
          {copied ? (
            <CheckIcon aria-hidden="true" />
          ) : (
            <CopyIcon aria-hidden="true" />
          )}
        </InputGroupButton>
      </InputGroupAddon>
      <span
        role="status"
        className={
          failed
            ? "absolute top-full left-0 mt-2 px-4 font-sans text-xs"
            : "sr-only"
        }
      >
        {copied
          ? "Copied"
          : failed
            ? "Couldn't copy. It's selected: press ⌘C or Ctrl+C."
            : ""}
      </span>
    </InputGroup>
  )
}

export { InstallCommand }
export default InstallCommand

pnpm dlx shadcn add @01orbital/install-command

npx shadcn add @01orbital/install-command

yarn shadcn add @01orbital/install-command

bunx --bun shadcn add @01orbital/install-command