SPB Git

Repository Public MIT

copy-button.tsx 1.0 KB 27 lines tsx

1"use client";2import { Check, Copy } from "lucide-react";3import { useState } from "react";45export function CopyButton({ text, label = "Copy", className = "" }: { text: string; label?: string; className?: string }) {6  const [done, setDone] = useState(false);7  return (8    <button9      type="button"10      className={`inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-line-strong px-2 text-xs text-muted transition-colors hover:border-accent/60 hover:text-text ${className}`}11      aria-label={done ? "Copied" : `${label} to clipboard`}12      onClick={async () => {13        try {14          await navigator.clipboard.writeText(text);15          setDone(true);16          setTimeout(() => setDone(false), 1600);17        } catch {18          /* clipboard unavailable: the text stays selectable */19        }20      }}21    >22      {done ? <Check size={13} aria-hidden className="text-ok" /> : <Copy size={13} aria-hidden />}23      <span aria-live="polite">{done ? "Copied" : label}</span>24    </button>25  );26}27
Files main
Menu

Theme