CopyField

<CopyField value="npm install @scope/sdk" label="Install command" />

'use client'

import { useState } from 'react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

interface CopyFieldProps {
  value: string
  label?: string
}

export function CopyField({ value, label }: CopyFieldProps): React.JSX.Element {
  const [copied, setCopied] = useState(false)

  function handleCopy() {
    navigator.clipboard.writeText(value).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    })
  }

  return (
    <div className="pilot-copy-field" role="group" aria-label={label}>
      <code className="pilot-copy-value">{value}</code>
      <button
        type="button"
        className={cn('pilot-copy-btn', copied && 'pilot-copy-btn--copied')}
        onClick={handleCopy}
        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
      >
        {copied ? (
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        ) : (
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
          </svg>
        )}
        <span>{copied ? 'Copied!' : 'Copy'}</span>
      </button>
    </div>
  )
}